| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <style type="text/css"> | |
| #box{width:100px;height:100px;background:red;position: absolute;left:0;} | |
| span{height:900px;border-left:1px red solid;position: absolute;left:500px;} | |
| </style> | |
| <title></title> | |
| <script type="text/javascript"> | |
| window.onload=function() | |
| { | |
| var oInput=document.getElementById("input1"); | |
| var oDiv=document.getElementById("box"); | |
| var timer=null; | |
| oInput.onclick=function() | |
| { | |
| startMove(); | |
| }; | |
| function startMove() | |
| { | |
| clearInterval(timer); | |
| var iSpeed=0; | |
| timer=setInterval(function() | |
| { | |
| if(oDiv.offsetLeft<500) | |
| { | |
| iSpeed+=5; | |
| } | |
| else | |
| { | |
| iSpeed-=5; | |
| } | |
| oDiv.style.left=oDiv.offsetLeft+iSpeed+"px"; | |
| },30) | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <input type="button" value="开始运动" id="input1"/> | |
| <div id="box"></div> | |
| <span></span> | |
| </body> | |
| </html> |
原文：http://blog.csdn.net/xiaomogg/article/details/45306475