vvvvvvvvvvvv
2016-05-14 12:54
for(var i=0;i<aList.length;i++)
{
aList[i].onmouseover=function(){
var t=this.getElementsByTagName("i")[0];
startMove(t,{opacity:0,top:-5},function(){
t.style.top=10+"px";
startMove(t,{opacity:100,top:5});
});
}
}
我的代码是这样的,鼠标滑过执行效果,这属于正常现象。但是出了问题,为什么鼠标移走时也执行动画,我没有移走的函数啊。
别用onmouseover 你该用onmouseenter试试
function getStyle(obj,attr){
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json)
{
var cur=0;
if(attr=="opacity")
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
{
flag=false;
}
if(attr=="opacity")
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+"px";
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
fn();
}
},20);
}
JS动画效果
113925 学习 · 1443 问题
相似问题