javascript弹性运动效果简单实现方法
本文实例讲述了javascript弹性运动效果简单实现方法。分享给大家供大家参考,具体如下:
弹性运动实现原理:加速运动+减速运动+摩擦运动
运行效果截图如下:
实例代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); }; }; var iSpeed = 0; var left = 0; function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget - obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="运动" /> <div id="div1"></div> <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div> </body> </html>
更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
js实现对ajax请求面向对象的封装
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的
学习JavaScript设计模式之状态模式
状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。当电灯开着,此时按下开关,电灯会切换到关闭状态;再按
WordPress中利用AJAX异步获取评论用户头像的方法
在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很
编辑:568数据
标签:状态,效果,事物,电灯,模式