본문 바로가기

Web/javascript & jQuery

탭 내용과 같이 자동롤링 tab 내용 1 tab 내용 2 tab 내용 3 tab 내용 4 tab1 tab2 tab3 tab4 더보기
레이어팝업 /* 레이어 팝업창 */function popup(x){ document.getElementById(x).style.display = "block";}function pop_close(x){ document.getElementById(x).style.display = "none";} 더보기
스크롤 따라 움직이는 레이어 웹사이트 헤더위로 [출처] 스크롤 따라 움직이는 레이어|작성자 혜벙벙 더보기
스크롤 따라다니는 배너 html 코드 배너 js 코드/* Floating Banner */var quick_menu = $('#floating_banner');var quick_top = 130; //topquick_menu.css('top', $(window).height() );$(document).ready(function(){ quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 130 ); $(window).scroll(function(){ quick_menu.stop(); quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 200 ); });}); [출처] .. 더보기
gnb, lnb, 타이틀 자동으로 제어하기 //gnb, lnb 자동으로 제어하기 var page = $navi.split("_"); // _ 단위로 잘라 배열에 넣는다 var depth1 = page[0] - 1; var depth2 = page[1] - 1; var depth3 = page[2] - 1; var sub1 = depth1 + 1; var sub2 = depth2 + 1; var sub3 = depth3 + 1; var gnbImg1 = $('#gnb > ol > li:eq(' + depth1 + ') > a > img'); // gnb 이미지 var gnbImg2 = $('#gnb > ol > li:eq(' + depth1 + ') > ul > li:eq(' + depth2 + ') > a > img'); // gnb하위 메뉴 이.. 더보기
a 링크 클릭시 점선 테두리 없애기 a링크 클릭시 점선 테두리 없애기$('a').focus(function() {$(this).blur();}); [출처] a링크 클릭시 점선 테두리 없애기 |작성자 혜벙벙 더보기
이미지 롤오버 스크립트로 제어하기 이미지 네임 끝을 _off과 _on로 저장하고 사용한다.제이쿼리 사용 // rollover $('img.rollover, #lnb img').each(function() { $(this).mouseover(function() { if ($(this).attr('src').match('_off')) { $(this).css('cursor', 'pointer'); $(this).attr('src', $(this).attr('src').replace('_off', '_on')); $(this).mouseout(function() { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); }); } }); }); 자바스크립트 사용 시 html태그에 o.. 더보기
footer 하단에 붙이기 컨텐츠 내용이 창 크기보다 적을 때, footer가 바로 밑에 붙어있는게 아닌 하단에 붙어 있기 위해 사용. css 코드.fixed { position:fixed; bottom:0px; width:100%; }.fixed-no { position:static; } jquery 코드/* footer sizing */ var wrapper = $('#wrapper').height(); var body = $(window).height(); if( wrapper body ){ $("#footer").removeClass('fixed'); $("#footer").addClass('fixed-no'); } $(window).resize(function() { var wrapper = $('#wrapper').he.. 더보기