| 标题 | 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。