Yujin's note - Javascript

Javascript

[Jquery] 메뉴 버튼 클릭 시 특정 위치로 스크롤 이동 및 active HTML <ul id="gnb"> <li class="first"><a href="#">main</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> </ul> </ul> <div id="landing"> <article class="section visual"> <div class="mtit"> <h3>visual</h3> </div> </article> <article class="section menu1"> <div class="mtit"> <h3>‘menu1</h3> </div> </article> <article class="menu2"> <div class="mtit"> <h3>menu2</h3> </div> </article> </div> CSS #landing .section {min-height: 100vh;display: flex;justify-content: center;align-items: center;} #landing .section:nth-child(even) {background: #333;} #landing .section:nth-child(even) .mtit > h3 {color: #fff;} .mtit {display: flex;justify-content: center;align-items: center;flex-direction: column;} .mtit > * {display: block;text-align: center;} .mtit > h3 {font-size: 32px;line-height: 42px;color: #333;font-weight: 700;} Jquery //section target section_target = { 'init' : function(){ this.action(); }, 'action' : function(){ //aside Active 처리 var $ele = { 'win' : $(window), 'sec' : $('#landing .section'), 'btnWrap' : $('#gnb'), 'btnOn' : $('#gnb > li'), 'btn' : '#gnb > li > a', } var wh = []; var secNum = 0; $ele.sec.each(function(i){ wh[i] = $ele.sec.eq(i).offset().top; }); $(document).on('click', $ele.btn, function(e){ var i = $(this).parent('li').index(); var pos = $('.section').eq(i).offset().top; e.preventDefault(); $('html,body').animate({ 'scrollTop' : pos },600,'easeInOutQuart'); return false; }); function acc(){ $ele.btnOn.eq(secNum).addClass('active').siblings().removeClass('active'); if(secNum==0){ $ele.btnWrap.addClass('home-on'); }else{ $ele.btnWrap.removeClass('home-on'); } } acc(); $ele.win.on({ 'load scroll resize' : function(){ var sh = parseInt($(this).scrollTop()); for (i=0; i < $ele.sec.length; i++){ if(sh >= parseInt(wh[i]) - ($ele.win.height()/2)){ secNum = i; acc(); } } } }); } } $(function(){ $(window).on({ 'load' : function(){ if($('#landing .section').length>0){ section_target.init(); } } }); }) 참고 사이트 : 노랑강정
[Jquery] 수량 증가 감소 버튼 HTML <div class="count-wrap _count"> <button type="button" class="minus">감소</button> <input type="text" class="inp" value="1" /> <button type="button" class="plus">증가</button> </div> CSS .count-wrap {position: relative;border: 1px solid #ddd;overflow: hidden;width: calc(52px + 34px*2);display: flex;align-items: center;box-sizing: border-box;} .count-wrap > button {border: 0;background: #fff;color: #000;width: 34px;height: 34px;font-size: 12px;} .count-wrap .inp {border: 1px solid #ddd;border-width: 0 1px !important;height: 34px !important;margin: 0 !important;display: block;width: 100%;padding: 0;flex-grow: 1;flex-basis: 0;text-align: center;} jQuery //수량 옵션count_number = { 'init' : function() { this.action(); }, 'action' : function() { var $ele = { 'btn' : $('._count :button') } $ele.btn.on({ 'click' : function(e){ e.preventDefault(); var $count = $(this).parent('._count').find('.inp'); var now = parseInt($count.val()); var min = 1; var max = 999; var num = now; if($(this).hasClass('minus')){ var type = 'm'; }else{ var type = 'p'; } if(type=='m'){ if(now>min){ num = now - 1; } }else{ if(now<max){ num = now + 1; } } if(num != now){ $count.val(num); } } }); } } $(function() { if($('._count :button').length>0){ count_number.init(); } });
[Jquery] 우클릭 및 드래그 막기 jQuery //우클릭 금지 $(document).bind('contextmenu',function(e){ return false; }); //드래그 금지 $('*').bind('selectstart',function(e){ return false; });
[Javascript] tab HTML <div class="_tabWrap"> <div class="tab-tab"> <a href="#">제목1</a> <a href="#">제목2</a> </div> <div class="tab-article"> <article>내용1</article> <article>내용2</article> </div> </div> Javascript tab('._tabWrap'); /* tab */ function tab(s,o={}){const t={tab:".tab-tab",article:".tab-article",className:"active",mode:"normal",tabAfter:"",loadAfter:""},e={...t,...o};document.querySelectorAll(s).forEach(n=>{const t=n.querySelectorAll(`${e.tab} > *`),o=n.querySelectorAll(`${e.article} > *`);t.forEach((n,a)=>{n.setAttribute("tab",a),0===a&&n.classList.add(e.className)}),o.forEach((n,a)=>{n.setAttribute("tab",a),n.style.transition="opacity .3s",n.style.opacity=a===0?"1":"0",n.style.display=a===0?"block":"none"}),t.forEach(n=>{n.addEventListener("click",function(n){n.preventDefault();const a=this.getAttribute("tab");t.forEach(t=>t.classList.remove(e.className)),this.classList.add(e.className),o.forEach(t=>{if(t.getAttribute("tab")===a){t.style.display="block",t.style.opacity="0",requestAnimationFrame(()=>t.style.opacity="1")}else{t.style.opacity="0",t.style.display="none"}}),"function"==typeof e.tabAfter&&e.tabAfter()})}),"function"==typeof e.loadAfter&&e.loadAfter()})}
[Jquery] slick slider 3 slick 슬라이더 사용 방법 사이트 URL : https://kenwheeler.github.io/slick/ HTML <div class="visual"> <div class="roll"> <div class="item">slider1</div> <div class="item">slider2</div> <div class="item">slider3</div> </div> <p class="vis-dots"> <span class="now">01</span> / <span class="tot">03</span> </p> <div class="vis-control"> <button class="play">play</button> <button class="stop">stop</button> </div> </div> jQuery //visual visual = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'roll' : $('.visual .roll') } var rolling = function(){ //item total number var tot_len = $('.visual .item').length; if (tot_len < 10) { tot_len = '0' + tot_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .tot').text(tot_len); //slider $ele.roll.slick({ 'fade' : false, //Fade 롤링 효과 'dots' : true, //하단 pager 'arrows' : true, //next,prev 버튼 'infinite' : true, //무한반복 'slidesToShow' : 1, //슬라이드 갯수 'slidesToScroll' : 1, //롤링시 슬라이드 갯수 'autoplay' : true, //자동롤링 'autoplaySpeed' : 4000, //자동롤링 딜레이 'swipe' : false, //모바일 스와프 여부 'centerMode' : false, //Center모드. 가운데 slide에 'slick-active' 클래스 부여. 'centerPadding' : 0, //Center모드인 경우 좌/우 여백 설정 'vertical' : false, //vertical 모드 'zIndex' : 80, //z-index 'pauseOnFocus' : false, 'pauseOnHover' : false, 'responsive' : [ //tablet { 'breakpoint' : 1300, 'settings' : { 'swipe' : true } }, //mobile { 'breakpoint' : 750, 'settings' : { 'swipe' : true } } ] }); //현재 슬라이드 number $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){ now_len = currentSlide + 1; if (now_len < 10) { now_len = '0' + now_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .now').text(now_len); }); //control play $('.vis-control .play').click(function(){ $ele.roll.slick('slickPlay'); }); //control stop $('.vis-control .stop').click(function(){ $ele.roll.slick('slickPause'); }); } rolling(); } } $(function(){ if($('.visual').length>0){ visual.init(); } }) 영상 같이 슬라이드 HTML <div class="visual"> <div class="roll"> <div class="item" data-src="<div class='video'><video class='vis_video pc' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video><video class='vis_video mobile' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video></div>"> <div class="video">  <video class="vis_video pc" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> <video class="vis_video mobile" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> </div> </div> <div class="item"> <a href="#" target="_blank" class="__pc"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__ta"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__mo"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> </div> </div> </div> CSS #main .visual .video {position: relative;z-index: 0;width: 100vw;height: 900px;overflow: hidden;} #main .visual .video video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;} #main .visual .video video.pc {display: block;} #main .visual .video video.mobile {display: none;} jQuery // visual visual = { 'init' : function() { this.action(); }, 'action' : function() { var $video_pc = $('.vis_video.pc'); var $video = $('.vis_video.mobile'); var $ele = { 'win' : $('window'), 'roll' : $('.visual .roll') } var rolling = function() { $ele.roll.slick({ 'fade' : true, // Fade 롤링 효과 ···