JS實例之圖片滑動效果，實例圖片滑動進場
阿新 • • 發佈：2017-06-22
ava 圖片滑動 代碼 right adding pre -- lin parseint
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實例之圖片滑動效果，實例圖片滑動進場