首页 > 代码库 > JS实例之图片滑动效果，实例图片滑动进场

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

2024-10-10 08:17:38   216人阅读

 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(lk<600){
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(dk<200){
45         dk++;
46     }
47     c.style.left=dk+"px";
48     window.setTimeout("start()",5);
49 }*/
50 </script>
51 </html>

 

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


联系
我们