JS实例之图片滑动效果,实例图片滑动进场
2021-07-17 14:05
标签:style tle padding utf-8 var vertica cal auto 滑动 JS实例之图片滑动效果,实例图片滑动进场 标签:style tle padding utf-8 var vertica cal auto 滑动 原文地址:http://www.cnblogs.com/zym0m/p/7067032.html 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>
上一篇:JSP编程技术5-购物车的实现-session会话对象
下一篇:HTML 全局属性
文章标题:JS实例之图片滑动效果,实例图片滑动进场
文章链接:http://soscw.com/index.php/essay/106228.html