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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>多物体运动</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;		
}
ul,li{
	list-style: none;
}
ul li{
	width: 200px;
	height: 100px;
	background: red;
	margin-bottom: 20px;
	filter:alpha(opacity:30);
	opacity: 0.3;
}
</style>
<script>
window.onload = function(){
	var aLi = document.getElementsByTagName('li');
	for(var i = 0;i < aLi.length;i++){
		aLi[i].timer = null;
		aLi[i].alpha = 30;
		aLi[i].onmouseover = function(){
			startMove(this,400);
			changeColor(this,100);
		}
		aLi[i].onmouseout = function(){
			startMove(this,200);
			changeColor(this,30);
		}
	}
}
function startMove(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (iTarget-obj.offsetWidth)/10;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);
		if(iTarget == obj.offsetWidth){
			clearInterval(obj.timer);
		}
		else{
			obj.style.width = obj.offsetWidth+speed+'px';
		}
	},30)
}
function changeColor(obj,iTarget){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (iTarget - obj.alpha)/10;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);
		if (iTarget == obj.alpha) {
			clearInterval(obj.timer);
		}
		else{
			obj.alpha+=speed;
			obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
			obj.style.opacity = obj.alpha/100;
		}
	},30)
}
</script>
</head>
<body>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
</body>
</html>

如果要实现offseWidth和opacity同时变化要怎样实现？上述方法为什么不能实现？请大神指教

IURIL

2015-10-19

源自：JS动画效果 4-1

关注问题我要回答

1060

操作

收起

3 回答

Y_du 回答被采纳 +3 积分
2015-10-19

是因为你定时器同名了，把第一个定时器的名称换成与第二个不一样就好了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>多物体运动</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;       
}
ul,li{
    list-style: none;
}
ul li{
    width: 200px;
    height: 100px;
    background: red;
    margin-bottom: 20px;
    filter:alpha(opacity:30);
    opacity: 0.3;
}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    for(var i = 0;i < aLi.length;i++){
        aLi[i].timer = null;
        aLi[i].alpha = 30;
        aLi[i].onmouseover = function(){
            startMove(this,400);
            changeColor(this,100);
        }
        aLi[i].onmouseout = function(){
            startMove(this,200);
            changeColor(this,30);
        }
    }
}
function startMove(obj,iTarget){
    clearInterval(obj.timerSpeed);
    obj.timerSpeed = setInterval(function(){
        var speed = (iTarget-obj.offsetWidth)/10;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(iTarget == obj.offsetWidth){
            clearInterval(obj.timerSpeed);
        }
        else{
            obj.style.width = obj.offsetWidth+speed+'px';
        }
    },30)
}
function changeColor(obj,iTarget){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var speed = (iTarget - obj.alpha)/10;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if (iTarget == obj.alpha) {
            clearInterval(obj.timer);
        }
        else{
            obj.alpha+=speed;
            obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
            obj.style.opacity = obj.alpha/100;
        }
    },30)
}
</script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

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

收起回答

IURIL 提问者

感谢！

2015-10-20 回复有任何疑惑可以回复我~

IURIL 提问者
2015-10-20

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>多物体运动</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;       
}
ul,li{
    list-style: none;
}
ul li{
    width: 200px;
    height: 100px;
    background: red;
    margin-bottom: 20px;
    filter:alpha(opacity:30);
    opacity: 0.3;
}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    for(var i = 0;i < aLi.length;i++){
        aLi[i].alpha = 30;
        aLi[i].onmouseover = function(){
            startMove(this,'width',400);
            startMove(this,'opacity',100);
        }
        aLi[i].onmouseout = function(){
            startMove(this,'width',200);
            startMove(this,'opacity',30);
        }
    }
}
function startMove(obj,attr,iTarget){
    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(iTarget == icur){
            clearInterval(obj.timer);
        }
        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>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

你好。接上面的问题，如果把属性封装之后，width和opacity调用同一函数的话，定时器不同名问题该怎么解决？谢谢！

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

收起回答