点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

效果：

思路：

利用setInterval计时器进行运动，offsetWidth实现宽度的变动，在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。

代码：

 <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>

巴特西

点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)

最新文章

热门文章