JS实例之图片滑动效果,实例图片滑动进场

2021-07-17 14:05

阅读:421

标签:style   tle   padding   utf-8   var   vertica   cal   auto   滑动   

 1 head>
 2 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 title>无标题文档title>
 4 style type="text/css">
 5 *{margin:0px auto; padding:0px;}
 6 #wai{width:800px; height:200px; margin-top:100px;}
 7 #left{width:200px; height:200px; background-color:#0F3; float:left;}
 8 #right{width:600px; height:200px; background-color:#36F; float:left;}
 9 #anniu{width:40px; height:40px; background-color:#FFF; position:relative; top:-120px; left:-200px; text-align:center; line-height:40px; vertical-align:middle;}
10 style>
11 head>
12 
13 body>
14 div id="wai">
15     div id="left" style="width:200px">div>
16     div id="right" style="width:600px">div>
17 div>
18 div id="anniu" onclick="start()" style="left:-200px">>>div>
19 body>
20 script type="text/javascript">
21 var a=document.getElementById("left");
22 var b=document.getElementById("right");
23 var c=document.getElementById("anniu");
24 function start(){
25     var lk=parseInt(a.style.width);
26     var rk=parseInt(b.style.width);
27     var dk=parseInt(c.style.left);
28     if(lk600){
29         lk++;
30         rk--;
31         dk++;
32     }
33     a.style.width=lk+"px";
34     b.style.width=rk+"px";
35     c.style.left=dk+"px";
36     window.setTimeout("start()",5);
37 }
38     /*var rk=parseInt(b.style.width);  //此处上面做了代码优化
39     if(rk>200){
40         rk--;
41     }
42     b.style.width=rk+"px";
43     var dk=parseInt(c.style.left);
44     if(dk45         dk++;
46     }
47     c.style.left=dk+"px";
48     window.setTimeout("start()",5);
49 }*/
50 script>
51 html>

 

JS实例之图片滑动效果,实例图片滑动进场

标签:style   tle   padding   utf-8   var   vertica   cal   auto   滑动   

原文地址:http://www.cnblogs.com/zym0m/p/7067032.html


评论


亲,登录后才可以留言!