JS实现物体带缓冲的间歇运动效果示例
程序员文章站
2024-02-05 15:46:10
本文实例讲述了js实现物体带缓冲的间歇运动效果。分享给大家供大家参考,具体如下:
<...
本文实例讲述了js实现物体带缓冲的间歇运动效果。分享给大家供大家参考,具体如下:
<!doctype html> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </head> <body> <div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div> <script type="text/javascript"> var odiv=document.getelementbyid('odiv'); odiv.onmouseover=function(){ move(this,'width',500,function(){ move(odiv,'left',300,function(){ move(odiv,'height',500,function(){ move(odiv,'borderwidth',10) }); }); }); } function move(obj,arr,target,fn){ clearinterval(obj.dt); obj.dt=setinterval(function(){ obj.ol=parseint(obj.style[arr]); if(obj.ol==target){ clearinterval(obj.dt); if(fn) fn(); }else{ obj.speed=(target-obj.ol)/8; obj.speed>0?obj.speed=math.ceil(obj.speed):obj.speed=math.floor(obj.speed); obj.style[arr]=obj.ol+obj.speed+"px"; } },30); } </script> </body> </html>
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。