纪奕滨
2015-09-04 10:47
window.onload=function(){
var li=document.getElementsByTagName("li");
for (var i = li.length - 1; i >= 0; i--) {
li[i].timer=null;
li[i].alpha=100;
li[i].onmouseover=function(){
startMove(this,400);
startopacity(this,30);
}
li[i].onmouseout=function(){
startMove(this,200);
startopacity(this,100);
}
};
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30)
}
function startopacity(obj,iTarget){
var speed=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.alpha>iTarget){
speed=-10;
}else{
speed=10;
}
if(obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.opacity=obj.alpha/100;
}
},30)
}
上面是我的js代码,这样执行的话只执行透明度的变化,然而把最后一个方法的代码删除就能执行宽度的变化,怎么样才能同时执行两个变化
你两个方法用的是同一个定时器相互争抢干扰缩写为一个方法, 同时注意if语句的判别 这个判断有些不好处理。可以设置执行的次数。当次数达到以后全部清空定时器。
放在同一个方法里,同一个定时器试下
JS动画效果
113924 学习 · 1443 问题
相似问题