Javascript动画效果（3）

2024-05-06 15:08:35

字体：大中小

来源：转载

供稿：网友

前面我们已经介绍了速度动画、透明度动画、多物体运动和任意值变化，并且我们在Javascript动画效果（二）中介绍到我们封装了一个简单的插件雏形，接下来我们对前面的动画效果进行进一步扩充，尽量将我们的框架做到更实用。在这里我们还需要了解两个运动，一个是链式运动，一个是同时运动。它们间的区别分别是：链式运动是指运动一个接着一个（一个运动完成马上进行下一个运动）；而同时运动是指所有的运动同时进行。在这里，我们该如何实现呢？

1、链式运动

　　前面的效果中，我们已经能对任意值进行相应的变化，我们该如何在一个动画后添加一个动画呢？

　　思路：我们能不能在参数中传入一个函数，当一个效果完成后马上执行后面的函数（效果），该函数可以是想要的动画效果

　　实现：在function startMove(obj,attr,iTarget)中在传入一个参数fn，代表一个函数。这时我们还需要修改的有在定时器的后面增加一个判断if(fn){fn(); }，当存在fn函数时执行fn函数，当不存在fn函数时清除定时器。这样我们的window.onload函数也应该发生相应变化，代码如下：

window.onload = function() {  var Li = document.getElementById('li1');  Li.onmouseover = function() {    startMove(Li, 'width', 400, function() {      startMove(Li, 'height', 200, function() {        startMove(Li, 'opacity', 100);      });    });  };  Li.onmouseout = function() {    startMove(Li, 'opacity', 30, function() {      startMove(Li, 'height', 100, function() {        startMove(Li, 'width', 200);      });    });  };};

所以我们得到链式运动的如下代码：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>链式运动</title>    <style type="text/css">      body,ul,li{ margin: 0px; padding: 0px; }      ul,li{ list-style: none; }      ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; }    </style>       </head>  <body>    <ul>      <li id="li1"></li>    </ul>    <script type="text/javascript">      window.onload = function(){        var Li = document.getElementById('li1');        Li.onmouseover = function(){          startMove(Li,'width',400,function(){            startMove(Li,'height',200,function(){              startMove(Li,'opacity',100);            });          });        };        Li.onmouseout = function(){          startMove(Li,'opacity',30,function(){            startMove(Li,'height',100,function(){              startMove(Li,'width',200);            });          });        };      };           function startMove(obj,attr,iTarget,fn){        clearInterval(obj.timer);        obj.timer = setInterval(function(){          var icur = 0;          if(attr == 'opacity'){            icur = Math.round(parseFloat(getStyle(obj,attr))*100);          }else{            icur = parseInt(getStyle(obj,attr));          }          var speed = (iTarget - icur)/10;          speed = speed>0?Math.ceil(speed):Math.floor(speed);          if(iTarget == icur){            clearInterval(obj.timer);            if(fn){              fn();            }          }          else{            if(attr == 'opacity'){              obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';              obj.style.opacity = (icur+speed)/100;            }            else{              obj.style[attr] = icur+speed+'px';            }          }        },30)      }                function getStyle(obj,attr){        if(obj.currentStyle){          return obj.currentStyle[attr];        }        else{          return getComputedStyle(obj,false)[attr];        }      }    </script>  </body></html>

上一篇：jquery动态创建div与input的实例代码

下一篇：javascript加载xml 并解析各节点的值(实现方法)