js应该没问题，单个移上图标动画没问题，但是一旦快速移动好像就会导致上一个的链式动画终止，哪位大神可以帮忙告知一下，找了一下午了。谢谢了。
来源：7-1 JS动画案例
To struggle—Dream
2016-08-07 17:40
js应该没问题，单个移上图标动画没问题，但是一旦快速移动好像就会导致上一个的链式动画终止，哪位大神可以帮忙告知一下，找了一下午了。谢谢了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图标</title>
<style type="text/css">
*{ margin:0; padding:0}
#odiv{ display:block; margin:0 auto; width:285px; height:225px; border:1px solid #C30; padding:20px}
a{ display:block; float:left; margin:10px; border:1px solid #C30; text-decoration:none}
p{ padding:20px}
i{ position: relative; top:20px; left:22px;filter:alpha(opacity:100); opacity:1}
</style>
<script type="text/javascript" >
function startmove(obj, json ,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var ioffset=0;
var flag = true;
for(var attr in json){
if(attr!='opacity'){
ioffset=parseInt(getStyle(obj,attr));
}
else{
ioffset=Math.round(parseFloat(getStyle(obj,attr))*100);
}
//计算速度
var speed=(json[attr]-ioffset)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=ioffset){
flag=false;
if(attr!='opacity')
{obj.style[attr]=ioffset+speed+'px';}
else{
obj.style.filter='alpha(opacity:'+(speed+ioffset)+')';
obj.style.opacity=(speed+ioffset)/100;}
}
else{flag=true;}
}
if(flag==true){
clearInterval(obj.timer);
if(fn){fn();}
}
},10);
}
function getStyle(obj,attr){
if(obj.currentStyle)
{return obj.currentStyle[attr];}
else
{return getComputedStyle(obj,false)[attr];}
}
</script>
window.onload=function(){
var odiv=document.getElementById('odiv'),
olist =odiv.getElementsByTagName('a');
for( var i=0; i <olist.length ;i++){
olist[i].timer==null;
olist[i].onmouseenter=function(){
oimg=this.getElementsByTagName('i')[0];
startmove(oimg,{'top':0,'opacity':0},function(){
oimg.style.top="30px";
startmove(oimg,{'top':20,'opacity':100})
})
}
}
}
</script>
</head>
<body>
<div id="odiv">
<a href="#"><i><img src="1.png" width="24" height="30" /></i><p>话费</p></a>
<a href="#"><i><img src="2.png" width="24" height="30" /></i><p>时间</p></a>
<a href="#"><i><img src="3.png" width="24" height="30" /></i><p>机票</p></a>
<a href="#"><i><img src="4.png" width="24" height="30" /></i><p>写作</p></a>
<a href="#"><i><img src="5.png" width="24" height="30" /></i><p>定位</p></a>
<a href="#"><i><img src="6.png" width="24" height="30" /></i><p>音乐</p></a>
</div>
</body>
</html>js应该没问题，单个移上图标动画没问题，但是一旦快速移动好像就会导致上一个的链式动画终止，哪位大神可以帮忙告知一下，找了一下午了。谢谢了。
写回答
关注
2回答
-
- 喜欢上一个人
- 2016-08-09 19:30:58
错误1: 54行和72行 都有一个</script>结束标签,但是你只有一个开始标签
错误2: 63行 olist[i].onmouseenter onmouseenter是什么鬼?
-
- 喜欢上一个人
- 2016-08-07 21:39:20
放图片干嘛,来代码
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113923 学习 · 1443 问题
相似问题