源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS实现多物体缓冲运动实例代码

  • 时间:2020-02-18 22:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现多物体缓冲运动实例代码
效果: [img]http://files.jb51.net/file_images/article/201311/20131129164920343.gif[/img] 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。 代码:
[u]复制代码[/u] 代码如下:
<head runat="server">     <title></title>     <style type="text/css">         div         {             width: 100px;             height: 50px;             background: #0000FF;             margin: 10px;         }     </style>     <script type="text/javascript">         window.onload = function () {             var oDiv = document.getElementsByTagName('div');             for (var i = 0; i < oDiv.length; i++) {                 oDiv[i].timer = null;           //给买个DIV做个标记,用以关闭相应DIV的定时器                 oDiv[i].onmouseover = function () {                     move(this, 400);        //给定时器输出参数                 }                 oDiv[i].onmouseout = function () {                     move(this, 100);                 }             }         };         function move(div, end) {             clearInterval(div.timer);             div.timer = setInterval(function () {                 var speed = (end - div.offsetWidth) / 5;        //(终点-要走的宽度)/缩放系数=DIV移动的速度                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整,也就是进位取整                 if (div.offsetWidth == end) {       //当到达终点时关闭计时器                     clearInterval(div.timer);                 }                 else {                     div.style.width = div.offsetWidth + speed + 'px';   //移动DIV的宽度                 }             }, 30)         }     </script> </head> <body>     <div>     </div>     <div>     </div>     <div>     </div> </body>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部