예제1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "content-type" content = "text/html;charset=utf-8" /> < title > new document </ title > < style type = "text/css" > div{display:none;background:red;height:200px} .a, .b{display:none;float:left;background-color:green;} </ style > < script type = "text/javascript" > // <![CDATA[ $(document).ready(function(){ $("div").show("slide",{direction:"left"},1000,function(){ $('.a').show("slide",{direction:"left"},1000,function(){ $('.b').show("slide",{direction:"left"},1000,null); }); }); }); //]]> </ script > </ head > < body > < div > < ul class = "a" > < li >menu1</ li > < li >menu2</ li > < li >menu3</ li > </ ul > < ul class = "b" > < li >menu11</ li > < li >menu12</ li > < li >menu13</ li > </ ul > </ div > </ body > </ html > |
예제2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "content-type" content = "text/html;charset=utf-8" /> < title > new document </ title > < style type = "text/css" > div{display:none;margin-bottom:10px;background:red;height:50px} .a,.e{width:50px;} .b,.f{width:100px;} .c,.g{width:150px;} .d,.h{width:200px;} </ style > < script type = "text/javascript" > // <![CDATA[ $(document).ready(function(){ $(".a").show("slide",{direction:"left"},1000,function(){ $(".b").show("slide",{direction:"left"},1000,function(){ $(".c").show("slide",{direction:"left"},1000,function(){ $(".d").show("slide",{direction:"left"},1000,null) }); }); }); }); //]]> </ script > </ head > < body > < div class = "a" ></ div > < div class = "b" ></ div > < div class = "c" ></ div > < div class = "d" ></ div > </ body > </ html > |
예제3
이미지를 클릭하면 슬라이드 됨
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "content-type" content = "text/html;charset=utf-8" /> < title > new document </ title > < style type = "text/css" > *{margin:0;padding:0;} div{position: absolute;} </ style > < script type = "text/javascript" > // <![CDATA[ $(document).ready(function(){ var count=0; $('.b').hide(); $('div').click(function(){ $('.a').hide("slide",{direction:"left"},500); $('.b').show("slide",{direction:"right"},500,function(){ $('.a').show(); $('.b').hide(); if(count==0){ $('.a img').attr("src","images/img_02.jpg"); $('.b img').attr("src","images/img_01.jpg"); count=1; }else{ $('.a img').attr("src","images/img_01.jpg"); $('.b img').attr("src","images/img_02.jpg"); count=0; } }); }); }); //]]> </ script > </ head > < body > < div class = "a" >< img src = "images/img_01.jpg" alt = "" /></ div > < div class = "b" >< img src = "images/img_02.jpg" alt = "" /></ div > </ body > </ html > |
예제4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "content-type" content = "text/html;charset=utf-8" /> < title > new document </ title > < style type = "text/css" > *{margin:0;padding:0;} div{float:left;} div img{height:268px} </ style > < script type = "text/javascript" > // <![CDATA[ $(document).ready(function(){ /* $(".b").hide(); */ var count=0; $(".b img").css("width",0); $("div").click(function(){ $(".a img").animate({width:0},1000); $(".b img").animate({width:188},1000,function(){ $(".a img").css("width","188"); //초기화 시켜줌 $(".b img").css("width","0"); //초기화 시켜줌 if(count==0){ $(".a img").attr("src","images/img_02.jpg"); $(".b img").attr("src","images/img_01.jpg"); count=1; }else{ $(".a img").attr("src","images/img_01.jpg"); $(".b img").attr("src","images/img_02.jpg"); count=0; } }); }); }); //]]> </ script > </ head > < body > < div class = "a" >< img src = "images/img_01.jpg" alt = "" /></ div > < div class = "b" >< img src = "images/img_02.jpg" alt = "" /></ div > </ body > </ html > |
댓글 0
댓글 쓰기 권한이 없습니다.
41 | 이클립스 jQuery 플러그인 | 2014.10.27 |
40 | 140813_[jquery] 이벤트 | 2014.09.23 |
39 | 140813_[jquery] 마우스 이벤트 | 2014.09.23 |
38 | 140813_[jquery] hover | 2014.09.23 |
37 | 140813_[jquery] mouseover | 2014.09.23 |
36 | 140813_[jquery] setInterval | 2014.09.23 |
> | 140812_[jquery] show(slide) | 2014.09.23 |
34 | 140811_[jquery] animate | 2014.09.23 |
33 | 140811_[jquery] 왼쪽 slide menu | 2014.09.23 |
32 | 140808_[jquery] slideUp/slideDown | 2014.09.23 |
31 | 140808_[jquery] hide/show | 2014.09.23 |
30 | 140808_[jquery] fadeout | 2014.09.23 |
29 | 140808_[jquery] val | 2014.09.22 |
28 | 140807_[jquery] html | 2014.09.22 |
27 | 140807_[jquery] text,attr | 2014.09.22 |
26 | 140806_[jquery] text | 2014.09.22 |
25 | 140806 -[jquery] attr | 2014.09.22 |
24 | 140805 -[jquery] css,selector | 2014.09.18 |
23 | jqury 소스 링크 | 2014.08.26 |
22 | 140725_1 | 2014.07.25 |