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

连式运动中，第四个参数无法运行；

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>完美框架</title>
 <style type="text/css">
  body,ul{
   margin: 0px;
   padding: 0px;
  }
  ul,li{
   list-style: none;
  }
  ul li{
   width: 200px;
   height: 100px;
   background: yellow;
   margin-bottom: 20px;
   opacity: 0.3;
   filter: alpha(opacity:30);
   border: 2px solid red;
  }
 </style>
 <script type="text/javascript">
 window.onload=function(){
  var aLi =document.getElementsByTagName('li');
  for (var i = aLi.length - 1; i >= 0; i--) {
    aLi[i].timer=null;
   aLi[i].onmouseover=function(){
                 startMove(this,'width',400,function(){
                  startMove(this,'height',400);
                 });
   }
   aLi[i].onmouseout=function(){
     startMove(this,'width',200,function(){
                  startMove(this,'height',200);
                 });
   }  }
  }
  //var timer=null;
  function startMove(obj,attr,iTarget,fn){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var icur=0;
    if (attr=='opacity') {
     // statement
     icur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else{
     icur=parseInt(getStyle(obj,attr));
    }
    var speed=(iTarget-icur)/8;
    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[attr]=(icur+speed)/100;
    }else{
    obj.style[attr]=icur+speed+'px';
   }
   } 
   },30);
   
  }
  function getStyle(obj,attr){
   if(obj.currentStyle){
    //IE
    return obj.currentStyle[attr];
   }
   else{
    //firefox
    return getComputedStyle(obj, false)[attr];
    }
  }
 </script>
</head>
<body>
 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</body>
</html>

qq_弃子_0

2016-12-11

源自：JS动画效果 5-1

关注问题我要回答

767

操作

收起

2 回答

rubyc 回答被采纳 +3 积分
2016-12-11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>完美框架</title>
    <style type="text/css">
        body,ul{
            margin: 0px;
            padding: 0px;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            opacity: 0.3;
            filter: alpha(opacity:30);
            border: 2px solid red;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var aLi =document.getElementsByTagName('li');
            for (var i = aLi.length - 1; i >= 0; i--) {
                var all = aLi[i];
                //alert(all);
                aLi[i].timer=null;
                //alert(aLi[i]);
                aLi[i].onmouseover=function(){
                    startMove(all,'width',400,function(){
//                        alert("kk");
                        startMove(all,'height',200);
                    });
                }
                aLi[i].onmouseout=function(){
                    startMove(all,'width',200,function(){
                        startMove(all,'height',200);
                    });
                }  }
        }
        //var timer=null;
        function startMove(obj,attr,iTarget,fn){
            //alert(obj);
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var icur=0;
                if (attr=='opacity') {
                    // statement
                    icur=Math.round(parseFloat(getStyle(obj,attr))*100);
                }
                else{
                    icur = parseInt(getStyle(obj,attr));
                }
                var speed=(iTarget-icur)/8;
                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[attr]=(icur+speed)/100;
                    }else{
                        obj.style[attr]=icur+speed+'px';
                    }
                }
            },30);

        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                //IE
                return obj.currentStyle[attr];
            }
            else{
                //firefox
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

我验证了一下，是this传参出问题了，aLi[i].onmouseover=function(){
                 startMove(this,'width',400,function(){
                  startMove(this,'height',400);
                 });
                 你这里第一个this传参正确（this此时是objectHTMLLIElent对象），
                 所以width能变，而第二个this则变成了window对象而不是
                 objectHTMLLIElent对象（我也不明白为啥，我估计是getStyle函数中的最后一句
                 getComputedStyle(obj, false)[attr];）把this变成了window对象，因此第二个
                 this传参失败。
                我的解决办法就是多定义了一个变量all，这样就不会改变成window对象了！
                你可以把我代码中alert注释正常运行，你就会明白了。