关于多个li调用不成功？-慕课网

首页课程实战体系课手记专栏慕课教程

关于多个li调用不成功？

来源：5-1 JS链式动画

日久弥新

2018-06-21 19:05

就是这个老师不是刚开始吧多余的li都删除了，我是在原来的基础上做着个例子，发现第一次调用startMove就成功，第二次在设置高的startMove就失败，没有效果，？？？

写回答关注

3回答

一叶秋才

2018-08-23 14:11:44

已采纳

对的,在调用startMove方法的第二遍的时候this 指代的不是当前这个li标签了稍微改一下就行用一个指针存一下:
window.onload = function() {
var aLi = document.getElementsByTagName('li');
var _this;
for(var i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].onmouseover = function() {
console.log(this);
_this = this;
startMove(this, 'width', 400, function() {
console.log(this);
startMove(_this, 'height', 200, function() {
startMove(_this, 'opacity', 100);
});
});
}
aLi[i].onmouseout = function() {
_this = this;
startMove(this, 'opacity', 30, function() {
startMove(_this, 'height', 100, function() {
startMove(_this, 'width', 200);
});
});
}
}
}

0 0
日久弥新

2018-06-21 19:12:04

我觉得是this在第二遍传值时出了问题，求教

0 0
日久弥新

2018-06-21 19:10:16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js链式动画</title>
</head>
<script>
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].timer=null;
        aLi[i].onmouseover=function(){
          startMove(this,'width',400,function(){
          startMove(this,'height',200,function(){
            startMove(this,'opacity',100);
          });
          });
        }
        aLi[i].onmouseout=function(){
          startMove(this,'opacity',30,function(){
          startMove(this,'height',100,function(){
            startMove(this,'width',200);
          });
          });
        }
    }
}
//var timer=null;
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)/8;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     // 动画停止
     if(icur==iTarget){
        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>
<style>
   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>
<body>
<ul>
   <li id='li1'></li>
   <li></li>
   <li></li>

</ul>
</body>
</html>

0 0

JS动画效果

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

113906 学习 · 1502 问题

查看课程

相似问题

链式运动多个li问题

回答 2

关于调用函数外加function()

回答 4

链式运动多个li this指针问题

回答 2

调用onmoueseout时关于alpha的值是100还是30

回答 1

如果很多个Li标签用了for循环,然后用链式运动,完美框架无效?

回答 2

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