반응형 jquery71 jQuery siblings() Method The siblings() method returns all sibling elements of the selected element. (siblings() 메서드는 선택한 요소의 모든 형제 요소를 반환합니다.) html jQuery siblings() Method jQuery siblings() Method jQuery siblings() Method jQuery siblings() Method jQuery siblings() Method css .layout { border:1px solid #dddddd; width:100%; } ul { list-style:none; padding:0 10px; margin:0; } li { margin:10px 0; padding:5px; border:1px s.. 2021. 12. 31. jQuery parent() Method The parent() method returns the direct parent element of the selected element. (parent() 메서드는 선택한 요소의 직접적인 부모 요소를 반환합니다.) html Hello Lorem Ipsum Dolor css .color { color:red; font-size:2em; font-weight:bold; } Jquery $( '.p1' ).parent( 'div.d1' ).css( 'font-size', '2em'); $( '.p1' ).parent().siblings('h3').addClass('color'); Result(결과) 2021. 12. 31. jQuery find() Method The find() method returns descendant elements of the selected element. (find() 메서드는 선택한 요소의 하위 요소를 반환합니다.) html Lorem Ipsum Dolor Lorem Ipsum Dolor css .color { color:red; font-size:2em; font-weight:bold; } Jquery $( '.a' ).find( 'span.s2' ).css( 'font-size', '2em'); $( '.b' ).find( 'span.s3' ).addClass('color'); Result(결과) 2021. 12. 31. alert message box(간단한 경고 메세지 박스) 간단한 경고 메세지 창 소스를 알아보자 html 부분 × Danger! Indicates a dangerous or potentially negative action. × Success! Indicates a successful or positive action. × Info! Indicates a neutral informative change or action. × Warning! Indicates a warning that might need attention. CSS 분분 .alert { padding: 20px; background-color: #f44336; color: #ffffff; margin-bottom: 15px; } .alert.success {background-color: #04.. 2021. 12. 30. Scattered Polaroids Gallery - 슬라이더 A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again. View demoMore info 2016. 11. 18. Tilted Content Slideshow - 슬라이더 A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. View demoMore info 2016. 11. 17. jQuery Image Slideshow Plugin - 슬라이더 A nice photo goes a long way towards making a design stand out. But we at Tutorialzine realized that sometimes a single picture is not enough and what you really need is a smooth slideshow of images to capture the user’s attention and bring dynamics to the app. However, the implementation of such slideshows can sometimes be tricky, so we decided to make a tiny plugin to do the job for you. View .. 2016. 11. 16. How to Create a Tiled Background Slideshow - 슬라이더 A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations. View demoMore info 2016. 11. 14. Fullscreen Slit Slider with jQuery and CSS3 - 슬라이더 A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demoMore info 2016. 11. 11. Draggable Dual-View Slideshow - 슬라이더 An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed. View demoMore info 2016. 11. 10. Perspective Mockup Slideshow - 슬라이더 An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta's script. View demoMore info 2016. 11. 8. 이전 1 ··· 3 4 5 6 다음
