为什么实现不了同时运动-慕课网

为什么实现不了同时运动

来源：6-1 同时运动

小宣哥

2016-05-30 18:09

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

写回答关注

1回答

TOTO晶: 2016-05-31 00:01:17

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);
        }

0 0

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题

为什么同时运动可以了，而链式运动就不行了？

回答 2

为什么实施不了链式运动？

回答 2

两种运动同事进行怎么实现？

回答 3

多个函数为什么不能同时运动，我的代码只能实现渐变，而长度不变

回答 1

链式运动只能一个运动结束后才能下一个如何实现两个运动同时运动

回答 1

打开慕课网App查看更多内容