由浅入深JavaScript14进阶-复杂运动_韩顺平由浅入深全面揭秘微信-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangdongxu999/article/details/77341316

JavaScript运动

JS复杂运动，包括多物体任意值运动和链式运动

多物体任意值运动
多个物体任意样式运动
要点：
在原有运动框架上，添加一个name参数用来实现任意值的传递
以下例子我们在上一期例子中多物体运动加以升级、
可以看到我们这三个div不仅都可以运动，而且运动的方面
不同，但是我们只写了一份运动框架，充分复用了代码，关键点就在于
我们把运动的样式当成参数传递
eg：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 100px;
               height: 100px;
               background-color: red;
               float: left;
               margin: 10px;
               font-size: 14px;
           }
       </style>
       <script>
           window.onload = function(){
               var divs = document.getElementsByTagName('div');
               divs[0].onmouseover = function(){
                   move(this,'height',400);
               }
               divs[1].onmouseover = function(){
                   move(this,'width',400);
               }
               divs[2].onmouseover = function(){
                   move(this,'fontSize',48);
               }
               divs[0].onmouseout = function(){
                   move(this,'height',100);
               }
               divs[1].onmouseout = function(){
                   move(this,'width',100);
               }
               divs[2].onmouseout = function(){
                   move(this,'fontSize',14);
               }
           }
           function move(obj,name,target){
               clearInterval(obj.timer);
               obj.timer = setInterval(function(){
                   var currentStyle = parseInt(getCssStyle(obj,name));
                   var speed = (target-currentStyle)/7;
                   speed = speed>0?Math.ceil(speed):Math.floor(speed);
                   if(currentStyle>=800){
                       clearInterval(obj.timer);
                   }else{
                       obj.style[name] = currentStyle+speed+'px';
                   }
               },30)
           }
           function getCssStyle(obj,name){
               var finalStyle = document.currentStyle||getComputedStyle(obj,null);
               return finalStyle[name];
           }
       </script>
   </head>
   <body>
       <div>变高</div>
       <div>变宽</div>
       <div>字体变大</div>
   </body>
</html>

JS链式运动
完成一个运动进行下一个运动
要点：回调函数
一个阶段运动完成，开始调用下一阶段运动函数
两点改动，一是调用方式上，二是运动框架上
完成了物体先变高然后变宽然后变字体的运动
eg：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 100px;
               height: 100px;
               background-color: red;
               float: left;
               margin: 10px;
               font-size: 14px;
           }
       </style>
       <script>
           window.onload = function(){
               var divs = document.getElementsByTagName('div');
               divs[0].onmouseover = function(){
                   move(this,'height',400,function(){
                       move(divs[0],'width',400,function(){
                           move(divs[0],'fontSize',48);
                       });
                   });
               }
               divs[0].onmouseout = function(){
                   move(this,'fontSize',14,function(){
                       move(divs[0],'width',100,function(){
                           move(divs[0],'height',100);
                       });
                   });
               }
               divs[1].onmouseover = function(){
                   move(this,'height',800,function(){
                       move(divs[1],'width',800,function(){
                           move(divs[1],'fontSize',48);
                       });
                   });
               }
               divs[1].onmouseout = function(){
                   move(this,'fontSize',14,function(){
                       move(divs[1],'width',100,function(){
                           move(divs[1],'height',100);
                       });
                   });
               }
           }
           function move(obj,name,target,fn){
               clearInterval(obj.timer);
               obj.timer = setInterval(function(){
                   var currentStyle = parseInt(getCssStyle(obj,name));
                   var speed = (target-currentStyle)/7;
                   speed = speed>0?Math.ceil(speed):Math.floor(speed);
                   if(currentStyle==target){
                       clearInterval(obj.timer);
                       if(fn)fn();//一个阶段完成去调用回调函数
                   }else{
                       obj.style[name] = currentStyle+speed+'px';
                   }
               },30)
           }
           function getCssStyle(obj,name){
               var finalStyle = document.currentStyle||getComputedStyle(obj,null);
               return finalStyle[name];
           }
       </script>
   </head>
   <body>
       <div>先变高然后变宽然后变字体</div>
       <div>先变高然后变宽然后变字体</div>
   </body>
</html>

JS运动总结
JS运动的本质:不断改变元素的样式
不断：定时器
样式：style
JS匀速运动
JS变速运动
JS多物体运动
JS多物体任意值运动
JS链式运动

说在最后的话：

本博会开一个JS专栏:《大神前端：JavaScript板块》长期更新，由浅入深带大家系统的学习JavaScript，
做出多彩的JS特效。
如果对你有用就关注一下专栏吧，我会不断的更新，后期还有其他版块。
http://blog.youkuaiyun.com/column/details/15918.html

想深入，系统全面的学习JS，博友们可以在优快云搜索我的课程《多彩JavaScript》@_@。
http://edu.youkuaiyun.com/course/detail/5619

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正