两种运动同事进行怎么实现？-慕课网

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

来源：4-1 JS多物体动画

IURIL

2015-10-19 17:32

<!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同时变化要怎样实现？上述方法为什么不能实现？请大神指教

写回答关注

3回答

Y_du: 2015-10-19 17:44:11

已采纳

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

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

IURIL

感谢！

2015-10-20 01:42:42

共 1 条回复 >

IURIL: 2015-10-20 12:35:41

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

IURIL

2015-10-20 01:40:31

Thanks！感谢！

0 0

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题

为什么实现不了同时运动

回答 1

链式运动只能一个运动结束后才能下一个如何实现两个运动同时运动

回答 1

完美的运动框架中for循环实现多个运动同时进行变化的原理是啥了？

回答 1

有个问题，怎么实现链式运动？

回答 4

运动框架实现思路

回答 3

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