(36)JS运动之使物体向右运动
2014-07-22 09:58
351 查看
基本思路:样式要是绝对定位,不然的话根本走不起来,当开启一个定时器的时候,必须先清除定时器,这是为了防止鼠标连续点击按钮而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止,用if-else控制逻辑控制。
效果图:
<!DOCTYPE HTML> <!-- --> <html> <head> <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 oDiv=document.getElementById('div1'); clearInterval(timer);//保证只有一个定时器在工作,不会因为连续点击多次按钮而开启多个定时器,从而导致速度变快 timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300)//大于300时让物体停在那里,不一直运动下去 { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()"/> <div id="div1"></div> </body> </html>
效果图:
相关文章推荐
- (36)JS运动之使物体向右运动
- js完美多物体运动框架(缓冲运动)
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
- js动画2 多物体运动
- js动画(4)——多物体运动
- JS多物体 任意值 链式 缓冲运动
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- JS运动-放大缩小物体(从中心)
- js运动-多物体运动
- 学习js运动多个物体宽度变化笔记
- JS实现多物体缓冲运动实例代码
- (42)JS运动之多物体框架--多个div变宽
- js多个物体运动问题2
- JS运动之多物体框架--多个div变宽
- 模拟真实物体运动的js动画库插件-Anima
- JS实现多物体缓冲运动实例代码
- js多个物体运动的问题1
- js实现多物体运动框架并兼容各浏览器
- js中封装多物体运动及透明度变化函数
- Js运动动画系列5--多物体运动-透明度