JS运动基础
2016-11-12 18:04
399 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 