为了账号安全,请及时绑定邮箱和手机立即绑定

链式的运动不了

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>缓冲运动</title>

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

<script>

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>

<div id="div1"></div>

<div id="div2"></div>

<div></div>


</body>

</html>


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

脚本那里提示这个:

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


正在回答

6 回答

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~
#1

qq_面码_2

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

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

startMove(this,'width',400);

});

主要是this的问题,提前把 this存在一个变量中

var _this =this;

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

startMove(_this,'width',400);

});


2 回复 有任何疑惑可以回复我~

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

2 回复 有任何疑惑可以回复我~

如果换成<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 回复 有任何疑惑可以回复我~
#1

vZina

不要用this
2015-01-14 回复 有任何疑惑可以回复我~
#2

樊凡平凡 回复 vZina

正解。
2015-05-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

链式的运动不了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信