点击刷新
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; top:50px; left: 0px; } </style> <script> function startMove(){ var oDiv=document.getElementById('div1'); setInterval(function(){ oDiv.style.left=oDiv.offsetLeft+10+'px'; },30) } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()"> <div id="div1" ></div> </input> </body> </html>
设置停顿位置和移动速度
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; top:50px; left: 0px; } </style> <script> //开启定时器 var timer=null; function startMove(){ var speed=3; var oDiv=document.getElementById('div1'); timer=setInterval(function(){ if(oDiv.offsetLeft>=300){//停顿位置 clearInterval(timer); } oDiv.style.left=oDiv.offsetLeft+speed+'px';//speed是物体运动速度快慢 },30); } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()"> <div id="div1" ></div> </input> </body> </html>
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
