• Javascript 多物体运动的实现


    这篇文章主要介绍了Javascript 多物体运动的实现,需要的朋友可以参考下

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题。

    代码如下:
    1 <style type="text/css">
    2             div {
    3                 width: 100px;
    4                 height: 50px;
    5                 background: red;
    6                 margin: 10px;
    7             }
    8 </style>

    代码如下:


    1 <body>
    2         <div></div>
    3         <div></div>
    4         <div></div>
    5  </body>

    以下是Javascript 代码:

     代码如下:

     1 <script type="text/javascript">
     2             window.onload = function() {
     3                 var aDiv = document.getElementsByTagName('div');
     4                 for (var i = 0; i < aDiv.length; i++) {
     5                     aDiv[i].onmouseover = function() {
     6                         startMove(this, 400);
     7                     };
     8                     aDiv[i].onmouseout = function() {
     9                         startMove(this, 100);
    10                     };
    11                 }
    12             }
    13             var timer = null;
    14             function startMove(obj, iTarget) {
    15                 clearInterval(timer);
    16                 timer = setInterval(function() {
    17                     var speed = (iTarget - obj.offsetWidth) / 6;
    18                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    19                     if (obj.offsetWidth == iTarget) {
    20                         clearInterval(timer);
    21                     } else {
    22                         obj.style.width = obj.offsetWidth + speed + 'px';
    23                     }
    24                 }, 30);
    25             }
    26         </script>

    此时当鼠标移入到第一个div 时,他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。

    image 这个是什么原因呢? 看图可以看出并没有运动完成。实际上是这样的,

    整个程序就一个定时器, 比如第一个div开始动了,第二个div 鼠标移入了 前一个定时器就被干掉了,那么自然就卡在那里了。

    所以最大的问题就是整个程序就只有一个定时器。那么怎么解决这个问题呢?

    解决方案:

    其实很简单,把定时器作为一个物体的属性加上,那么每个物体都有一个定时器在,当关闭定时器的时候是关闭物体上的定时器,开也是物体上的定时器

    那么他们之间就可以完全互不干扰的运行。

    看下修改后的Javascript代码:

     代码如下:

     1 <script type="text/javascript">
     2             window.onload = function() {
     3                 var aDiv = document.getElementsByTagName('div');
     4                 for (var i = 0; i < aDiv.length; i++) {
     5                     aDiv[i].timer=null; // 把定时器作为一个物体的属性存起来
     6                     aDiv[i].onmouseover = function() {
     7                         startMove(this, 400);
     8                     };
     9                     aDiv[i].onmouseout = function() {
    10                         startMove(this, 100);
    11                     };
    12                 }
    13             }
    14             function startMove(obj, iTarget) {
    15                 clearInterval(obj.timer);
    16                 obj.timer = setInterval(function() {
    17                     var speed = (iTarget - obj.offsetWidth) / 6;
    18                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    19                     if (obj.offsetWidth == iTarget) {
    20                         clearInterval(obj.timer);
    21                     } else {
    22                         obj.style.width = obj.offsetWidth + speed + 'px';
    23                     }
    24                 }, 30);
    25             }
    26         </script>
    这样程序就没有问题了,能够支持多物体的运动。
     

    下面是一个多物体运动的实例哦。

    效果:

    思路:

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

    代码如下:

     1 <head runat="server">
     2     <title></title>
     3     <style type="text/css">
     4         div
     5         {
     6             width: 100px;
     7             height: 50px;
     8             background: #0000FF;
     9             margin: 10px;
    10         }
    11     </style>
    12     <script type="text/javascript">
    13         window.onload = function () {
    14             var oDiv = document.getElementsByTagName('div');
    15             for (var i = 0; i < oDiv.length; i++) {
    16                 oDiv[i].timer = null;           //给买个DIV做个标记,用以关闭相应DIV的定时器
    17                 oDiv[i].onmouseover = function () {
    18                     move(this, 400);        //给定时器输出参数
    19                 }
    20                 oDiv[i].onmouseout = function () {
    21                     move(this, 100);
    22                 }
    23             }
    24         };
    25         function move(div, end) {
    26             clearInterval(div.timer);
    27             div.timer = setInterval(function () {
    28                 var speed = (end - div.offsetWidth) / 5;        //(终点-要走的宽度)/缩放系数=DIV移动的速度
    29                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整,也就是进位取整
    30                 if (div.offsetWidth == end) {       //当到达终点时关闭计时器
    31                     clearInterval(div.timer);
    32                 }
    33                 else {
    34                     div.style.width = div.offsetWidth + speed + 'px';   //移动DIV的宽度
    35                 }
    36             }, 30)
    37         }
    38     </script>
    39 </head>
    40 <body>
    41     <div>
    42     </div>
    43     <div>
    44     </div>
    45     <div>
    46     </div>
    47 </body>


     
     
     
  • 相关阅读:
    javascript 判断电话号码的格式
    JavaScript 'Pig latin is cool'==>'igPay atinlay siay oolcay'
    JavaScript 找出特殊数字如135 = 1^1 + 3^2 + 5^3
    nginx+Apache实现动静分离
    MYSQL数据库的主从复制
    Connection could not be established with host smtp.163.com [Connection timed out #110]
    Yii2 的 redis 应用
    Yii2 模块名、控制器名、方法名
    讯搜
    支付宝异步通知时间点分布
  • 原文地址:https://www.cnblogs.com/hl-520/p/4244198.html
走看看 - 开发者的网上家园