多個函數(shù)為什么不能同時運動，我的代碼只能實現(xiàn)漸變，而長度不變
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物體運動</title>
<style>
?*{
margin: 0;
padding:0;
? }
? ul{
? ?list-style: none;
?
? }
? ul li{
? ?width: 200px;
? ?height: 100px;
? ?background-color: yellow;
? ?margin-bottom: 20px;
? ?filter: alpha(opacity:30);?
? ?opacity: 0.3;
? ?border: 4px solid black;?
? }
</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);
startMove1(this,100);
}
ali[i].onmouseout = function(){
startMove(this,200);
startMove1(this,30);
}
}
}
//var timer = null;
function startMove(node,targe){
clearInterval(node.timer);
node.timer = setInterval(function(){
var speed = (targe-node.offsetWidth)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(node.offsetWidth==targe){
clearInterval(node.timer);
}else{
node.style.width=node.offsetWidth + speed +"px";
}
},30)
};
//多物體不能共用
// var alpha =30;
function startMove1(node,targe){
clearInterval(node.timer);
var speed = 0;
if(node.alpha>targe){
speed = -10;
}else{speed=10;}
node.timer = setInterval(function(){
if(node.alpha==targe){
clearInterval(node.timer);
}else{
node.alpha+=speed;
node.style.filter="alpha(opacity:'+node.alpha+')";
node.style.opacity=node.alpha/100;
}
},60)
}
</script>
</head>
<body>
<h1>多物體運動</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2016-07-24
后面的兩門課程《鏈?zhǔn)竭\動》和《同時運動》會講解。