jQuery sticky menu, scroll spy

See the Pen jQuery sticky, spy by miok (@slog-miok) on CodePen. CSS *{margin: 0 ; padding: 0} ol,ul{list-style: none} a{color: #333; text-decoration: none} #wrap{width:1000px; margin: 0 auto; overflow: hidden} header{position: fixed; left:0; top:0; height:150px; background: #0f0; width: 100%; z-index: 50} .main{height: 200px; background: orange; margin-top: 150px} .navBox{ background: #ccc} /* 상..

2021.12.16

jQuery left right clone gallery

CSS @charset "utf-8"; /* CSS Document */ *{margin:0; padding:0;} ul, li{list-style:none;} #slide_gallery_box{position:relative; width:750px; border:3px solid #CCC; overflow:hidden;} #slide_gallery_box .slide_gallery{position:relative; left:0; top:0; width:1500px; overflow:hidden;} #slide_gallery_box .slide_gallery ul{float:left;} #slide_gallery_box .slide_gallery ul li{float:left;} #slide_galler..

2021.12.15

jQuery silde left (partenr banner)

JS // JavaScript Document $(document).ready(function() { var position = 0; // 최초위치 var movesize = 2; // 설정된 초 마다 이동할 픽셀 var timeonoff; $('.partnerBox ul').after($('.partnerBox ul').clone()); // ul 끝에 ul을 복제해라 function partnerMove(){ position -= movesize; // 최초위치에서 이당할 픽셀마다 감소 $('.partnerBox').css('left',position); if(position < -945){ $('.partnerBox').css('left',0); position = 0; } }; timeonoff=..

2021.12.15

jQuery 아코디언 갤러리 (컬랩스)

JS $(document).ready(function(){ /* 자동기능.... var timeonoff; var imageCount=4; var cnt=1; function move_gallery(){ cnt++; if(cnt==1){ $('.eventSlideMenu .img02').animate({left:350},450).clearQueue(); $('.eventSlideMenu .img03').animate({left:400},450).clearQueue(); $('.eventSlideMenu .img04').animate({left:450},450).clearQueue(); }else if(cnt==2){ $('.eventSlideMenu .img02').animate({left:50},450..

2021.12.15

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