js实现缓冲运动效果的方法
更新时间:2015年04月10日 09:55:05 作者:jingangel
这篇文章主要介绍了js实现缓冲运动效果的方法,涉及javascript操作元素运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现缓冲运动效果的方法。分享给大家供大家参考。具体分析如下:
该实例可实现一开始速度很快,然后慢下来,直到停止的效果。
要点:
var speed = (target-box.offsetLeft)/8;
目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小
speed = speed>0?Math.ceil(speed):Math.floor(speed);
正向速度的时候向上取整,反向速度的时候向下取整
代码:
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> <!-- body{margin:0; padding:0; font:12px/1.5 arial;} #box{width:100px; height:100px; position:absolute; background:#06c; left:0;} --> </style> <script> <!-- window.onload = function(){ var box = document.getElementById("box"); var btn = document.getElementById("btn"); var timer=null; btn.onclick = function(){ startrun(300); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ var speed = (target-box.offsetLeft)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(box.offsetLeft == target){ clearInterval(timer); }else{ box.style.left = box.offsetLeft+speed+"px"; } document.getElementById('abc').innerHTML+=box.offsetLeft+','+speed+'<br>'; },30); } } //--> </script> </head> <body> <input id="btn" type="submit" value="向右运动"> <div id="box"> </div> <br> <textarea id="abc" cols="50" rows="10" style="margin-top:130px"></textarea> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JavaScript中String.prototype用法实例
这篇文章主要介绍了JavaScript中String.prototype用法,实例分析了prototype的功能及使用技巧,需要的朋友可以参考下2015-05-05JS & JQuery 动态添加 select option
这篇文章主要介绍了JS & JQuery 动态添加 select option 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧2016-06-06为JavaScript提供睡眠功能(sleep) 自编译JS引擎
如何在js中让函数睡眠多少秒? 经常会有Javascript初学者提出这样的问题,自从js出现以来.2010-08-08
最新评论