jQuery(55)
-
jQuery 아코디언메뉴
Q&A나 FAQ에서 많이 쓰이는 아코디언 메뉴 CSS @charset "utf-8"; /* CSS Document */ *{margin: 0; padding:0;} body{font-size:16px; color:#333; line-height:1.6; margin: 30px;} ul, li{list-style:none;} a{color:inherit; text-decoration: none;} .faq{width:650px; border-bottom:1px solid #ddd;font-size:12px} .faq .hgroup{position:relative; margin:0 0 10px 0;} .faq .hgroup .all{position:absolute; top:5px; right:10px;} ...
2021.12.15
-
jQuery 순차적 접근
CSS /* CSS Document */ *{margin:0; padding:0} body{font-size:16px; margin:30px;} img{border:0; vertical-align:top} li{line-height:1.5em; list-style:none} .gallery_box{position:relative; width:250px;height:305px; border:1px solid #ccc; overflow:hidden} .gallery_box h3{margin:0 0 20px 20px} .gallery_box .news1 li{background:#6C0} .gallery_box .news2 li{background:#F9F} .gallery_box .news3 li{backg..
2021.12.15
-
jQuery 순차적 접근, 자동롤링
HTML 이미지 설명1 이미지 설명2 이미지 설명3 이미지 설명4 이미지 설명5 이미지 설명6 왼쪽 오른쪽
2021.12.14
-
jQuery 객체 배열 팝업
CSS *{margin: 0; padding: 0;} .pop .modal_box{position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100%; background: #000; opacity: .7; display: none;} .pop .popup{position: fixed; top: 50%; left: 50%; margin: -300px 0 0 -300px; width: 600px; height: 600px; background: #fff; box-shadow: 1px 3px 7px 0px #666; z-index: 60; display:none;} .pop .popup img{width: 94%; margin:20px 3%;} ..
2021.12.14
-
jQuery click pop
CSS .pop{} .pop .modal_box{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .7; display: none; z-index: 50;} .pop .popup{position: fixed; top: 50%; left: 50%; margin: -300px 0 0 -300px; width: 600px; height: 600px; background: #fff; box-shadow: 1px 3px 7px 0px #666; z-index: 100; display:none;} .pop .popup img{width: 94%; margin:20px 3%;} .pop .popup p{widt..
2021.12.14
-
jQuery layer popup
JS $(document).ready(function(){ $('.openBtn').on('click', function(e){ e.preventDefault(); $(this).next('.big').fadeIn('slow'); $('.box').show(); }); $('.closeBtn, .box').on('click', function(e){ e.preventDefault(); $('.big').fadeOut('fast'); $('.box').hide(); }); }); HTML 이미지에 대한 내용 닫기 이미지에 대한 내용 닫기
2021.12.14