Study/jQuery(50)
-
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
-
jQuery tabmenu3
CSS /* CSS Document */ *{margin:0; padding:0} body{margin:20px;} img{border:0; vertical-align:top} ul,ol{list-style:none} body{font-family:"돋움"; font-size:14px; color:#333333} a{color: #333; text-decoration: none;} .tabs {border:1px solid #ccc; width:600px;} .tabs .tab_menu{overflow: hidden;} .tabs .tab_menu li{float: left; margin-right: 10px;} .tabs .tab {display:block; width:84px;text-align: c..
2021.12.14
-
jQuery tabmenu2
CSS /* CSS Document */ *{margin:0; padding:0} body{margin:20px;} img{border:0; vertical-align:top} ul,ol{list-style:none} body{font-family:"돋움"; font-size:14px; color:#333} a{color: #333; text-decoration: none;} .tabs {width:600px; border:1px solid #ccc;} .tabs .tab_menu{overflow: hidden;} .tabs .tab_menu li{float: left; margin-right: 10px;} .tabs .tab {display:block; width:84px; text-align: cen..
2021.12.14