多个函数为什么不能同时运动，我的代码只能实现渐变，而长度不变
wajf
2016-07-24 09:18
<!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>
1回答
-
- Freeman1989
- 2016-07-24 11:44:30
后面的两门课程《链式运动》和《同时运动》会讲解。
JS动画效果
113925 学习 · 1443 问题
相似问题
回答 2
回答 1