链式的运动不了-慕课网

链式的运动不了

来源：5-1 JS链式动画

木有人

2014-12-24 15:55

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

*{ margin:0; padding:0}

div{ width:200px; height:200px; background:#f00; margin-bottom:10px; border:2px solid #999;opacity:.3; filter:alpha(opacity=30)}

</style>

window.onload=function(){

var Li1=document.getElementById('div1');

Li1.onmouseover=function(){

this.timer=null;

startMove(this,'opacity',100,function(){

startMove(this,'width',400);

});

}

var alpha=30;

function startMove(obj,attr,iTarget,fn){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

//1.取当前的值

var iCur=0;

if(attr=='opacity'){

iCur=Math.round(parseFloat(getStyle(obj,attr))*100);//如果统一用下面parseInt(getStyle(obj,attr))这个，获取透明度时，都是0.几，取出来就只能出来0，没有透明度的变化；乘以100是配合filter;Math.round 是为了四舍五入

}else{

iCur=parseInt(getStyle(obj,attr));

}

//2.算速度

var speed=(iTarget-iCur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

//3.检测是否停止还是运动

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){//兼容ie

return obj.currentStyle[attr];

}

else{//兼容火狐

return getComputedStyle(obj,false)[attr];

}

</script>

</head>

<body>

</body>

</html>

有什么问题？为什么只能改变透明度，多运动就不行了。

脚本那里提示这个：

TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.

写回答关注

6回答

qq_面码_2

2017-08-15 15:36:16

谢谢老师们的解惑，原来把调用函数的this 提前赋值给一个变量，那这个变量就变成了oDiv了，下面用这个变量就能代表oDiv 这个对象了，哈哈哈，厉害?

0 0
CLING_AMY

2016-12-10 13:48:05

你的问题解决了吗？到底是哪里出问题了呢？

1 0

qq_面码_...

问题出现在this 这个东西上，第一个this 是被它上一级的对象所调用，到了链式运动那个函数this就变成了window 对象(js里最外层的对象)了，原因我想大概是因为remove 里的链式运动函数并没有被其他对象调用，所以默认为window 对象。

2017-08-15 15:32:13

共 1 条回复 >
不会忘记怎么

2015-10-23 21:33:27

startMove(this,'opacity',100,function(){
startMove(this,'width',400);
});
主要是this的问题，提前把 this存在一个变量中
var _this =this;
startMove(_this,'opacity',100,function(){
startMove(_this,'width',400);
});

0 2
Double_0004

2015-06-14 11:09:35

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3;margin:10px;}
</style>

<script>
window.onload=function ()
{
   var oDiv=document.getElementsByTagName('div');//先获取div元素
   for(var i=0;i<oDiv.length;i++){
   oDiv[i].timer = null;
   oDiv[i].onmouseover=function ()
   {
       var _this = this;
       startMove(_this,'width',300,function(){//先是宽变300
           startMove(_this,'height',300,function(){//当宽变300的时候即运动结束时候开启另一个运动使其高变为300
               startMove(_this,'opacity',100);//使透明度变成100原来是30

           });

       });
   };
   oDiv[i].onmouseout=function ()//当鼠标移出的时候跟移进的时候效果相反即可。
   {
       var _this = this;
       startMove(_this,'opacity',30,function(){
           startMove(_this,'height',100,function(){
               startMove(_this,'width',100);
           });

       });
   };

};//以下是运动框架的内容
function getStyle(obj, name)
{
   if(obj.currentStyle)
   {
       return obj.currentStyle[name];
   }
   else
   {
       return getComputedStyle(obj, false)[name];
   }
}

function startMove(obj, attr, iTarget, fnEnd)//比普通的运动框架写多了一个函数说明下一阶段要执行的运动
{
   clearInterval(obj.timer);
   obj.timer=setInterval(function (){
       var cur=0;

       if(attr=='opacity')
       {
           cur=Math.round(parseFloat(getStyle(obj, attr))*100);
       }
       else
       {
           cur=parseInt(getStyle(obj, attr));
       }

       var speed=(iTarget-cur)/6;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);

       if(cur==iTarget)
       {
           clearInterval(obj.timer);

           if(fnEnd)fnEnd();
       }
       else
       {
           if(attr=='opacity')
           {
               obj.style.filter='alpha(opacity:'+(cur+speed)+')';
               obj.style.opacity=(cur+speed)/100;
           }
           else
           {
               obj.style[attr]=cur+speed+'px';
           }
       }
   }, 30);
}
}
</script>
</head>
<body>
   <div ></div>
   <div></div>
   <div></div>
</body>
</html>

0 2
木有人

2014-12-24 16:24:09

如果换成<ul><li></li><li></li><li></li></ul>,这样岂不是用不了循环？
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].timer=null;
aLi[i].index=i;
aLi[i].alpha=30;
aLi[i].onmouseover=function(){
startMove(aLi[this.index],'opacity',100,function(){
startMove(aLi[this.index],'width',400);
});
}
}

0 0
木有人

2014-12-24 16:00:16

为什么老师的就可以。。。

2 0

樊凡平凡回复vZina

正解。

2015-05-12 16:55:36

共 2 条回复 >