                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么实现不了同时运动

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>test</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   #ul1 li{
       width:150px;
       height:100px;
       margin-top: 20px;
       background: red;
       border:1px solid green;
       opacity: 0.8;
       filter:alpha(opacity=80);
       /*加上边框后，会导致offsetwidth变宽*/
       /*position:relative;*/

   }
   </style>
</head>
<body>
   <ul id="ul1">
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <script>
       var ul1=document.getElementById("ul1");
       var lis=ul1.getElementsByTagName("li");
       //获取非行间样式
       function getStyle(obj,name){
           if(obj.currentStyle){
               return obj.currentStyle[name];
           }else{
               return getComputedStyle(obj,false)[name];
           }
       }
//       for(var i=0;i<lis.length;i++){
           //数组是对象，给对象设置一份属性值；设置不同的数组的定时器，使多物体运动时相互不受影响
//           lis[i].n=null;
         //链式运动
//           lis[0].onmouseover=function(){
//               move(this,'opacity',30);
////               alert(1)
//           }
//
//           lis[0].onmouseout=function(){
//               move(this,'opacity',80);
//           }
//       }
        //链式运动
//      lis[1].onmouseover=function(){
//               move( lis[1],'height',260,function(){
//                   move(lis[1],'width',300,function(){
//                       move(lis[1],'opacity',30)
//                   })
//               });
////               alert(1)
//           }
//
//       lis[1].onmouseout=function(){
//               move(lis[1],'width',150,function(){
//                   move(lis[1],'height',100)
//               });
//           }

   //同时运动
      lis[0].onmouseover=function(){
         move(lis[0],{'opacity':20,'width':300})
      }

       function move(obj, json,fn){
           //清除与调用计时器
           //attr是json内的name
           var flag=true;
           for(var attr in json){
           clearInterval(obj.n);
           obj.n=setInterval(function(){
          //   console.log(obj.offsetWidth)
       //当有边框时不能用offsetWidth,而要用clientwidth或者
         //是通过获取非行间样式的方法或的width(getStyles)
               var cur=0;
               //判断是哪种类型
               if(attr=="opacity"){
               cur=parseFloat(getStyle(obj,attr))*100;
               }else{
                  cur=parseInt(getStyle(obj,attr))
               }
               //计算速度
               var speed=(json[attr]-cur)/10;
               speed=speed>0?Math.ceil(speed):Math.floor(speed);
               //给对象赋值
               if(cur!=json[attr]){
                   flag=false;
               }
               if(attr=="opacity"){
               obj.style.opacity=(cur+speed)/100;
               obj.style.filter="alpha(opacity:"+cur+speed+")"
                   }
               else{
                       obj.style[attr]=cur+speed+"px";
               }
               if(flag){
                   clearInterval(obj.n)
                   if(fn){
                       fn();
                   }
               }
           },17)
           }
           }
   </script>
</body>
</html>

小宣哥

2016-05-30

源自：JS动画效果 6-1

关注问题我要回答

732

操作

收起

1 回答

TOTO晶
2016-05-31

var flag=true; 及for(var attr in json) 应该放在定时器n内, json的for循环之前
if(flag){清除定时器和fn回调}应该放在定时器n内, json的for循环之后
具体解释可以参考<JS动画效果课程 6-2小节>的评论区讨论,希望能帮到你

更改后的参考code如下(未贴上来的其他code不变):

        function move(obj, json,fn){
            //清除与调用计时器
            //attr是json内的name
            clearInterval(obj.n);
            obj.n=setInterval(function(){
            // console.log(obj.offsetWidth)
            // 当有边框时不能用offsetWidth,而要用clientwidth或者
            // 是通过获取非行间样式的方法或的width(getStyles)
             var flag = true;
             for (var attr in json) {
                 var cur = 0;
                 //判断是哪种类型
                 if (attr == "opacity") {
                     cur = parseFloat(getStyle(obj, attr)) * 100;
                 } else {
                     cur = parseInt(getStyle(obj, attr));
                 }
                 //计算速度
                 var speed = (json[attr] - cur) / 10;
                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                 //给对象赋值
                 if (cur != json[attr]) {
                     flag = false;
                 }
                 if (attr == "opacity") {
                     obj.style.opacity = (cur + speed) / 100;
                     obj.style.filter = "alpha(opacity:" + cur + speed + ")";
                 } else {
                     obj.style[attr] = cur + speed + "px";
                 }
             }
            if (flag) {
                clearInterval(obj.n);
                if (fn) {
                    fn();
                }
            }
            },17);
        }