为什么我不管用onmouseover还是onmouseenter我都必须鼠标滑进划出两次才可以呢？

<!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>icon运动</title><style type="text/css">*{ margin:0; padding:0; }#pic {width: 300px;margin: 20px auto;border: 1px solid #ccc;background-color: pink;}#pic a {display: inline-block;width: 50px;height: 30px;border: 1px solid #ddd;border-radius: 3px;background-color: #fff;text-align: center;margin: 10px 17px;position: relative;padding: 40px 0px 10px 0px;color: #9c9c9c;font-size: 12px;text-decoration: none;line-height: 50px;overflow: hidden;}#pic a i {position: absolute;top: 10px;left: 0px;display: inline-block;width: 100%;text-align: center;fliter: alpha(opacity: 100);opacity: 1;}#pic a:hover {color: #F00;}#pic img {border: none;}</style><script src="../动画效果/move.js"></script><script>window.onload=function(){ var oMove=document.getElementById('pic'); var opic=oMove.getElementsByTagName('a'); for(var i=0;i<opic.length;i++){ opic[i].onmouseenter=function(){ var lisi=this.getElementsByTagName("i")[0]; starMove(lisi,{top:-40,opacity:0},function(){ lisi.style.top=20+'px'; starMove(lisi,{top:10,opacity:100}); }); } } }</script></head><body><div id="pic"><a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>时间</p></a><a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>不多</p></a><a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>好好</p></a><a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>加油</p></a></div></body>每次都需要滑进划出两次然后才能执行完整动画，而且有的时候还不成功，又没有朋友能帮我看看这怎么回事啊？谢谢了

查看完整描述

3 回答

已采纳

stone310

TA贡献361条经验获得超191个赞

第二行var flag=true;要放到setInterval里面，相当于每次执行flag为true，然后遇到未完成动画就为false，没有未完成动画就还是true；

如果放在外面，一开始flag为false，那么继续循环flag都是false，而且不会再变成true，自然后续函数无法执行

你可以在if(flag)前面放上document.title=flag，然后运行看网页标题，无论怎么动都是false

反对回复 2016-08-23

慕仰6432972
谢啦，我看了一下把flag放到if(icur!=json[attr]){ flag=false; }else{ flag=true; }这样写也是可以的

回复 2016-08-24
stone310
恩！不客气，里面设置flag=true的执行语句也可以！

回复 2016-08-24

stone310

TA贡献361条经验获得超191个赞

这代码没问题吧，有个小地方就是CSS那里filter拼错了，把move.js放出来吧

反对回复 2016-08-23

慕仰6432972
function starMove(obj,json,fn){ var flag=true; clearInterval(obj.timer) obj.timer=setInterval(function(){ for(var attr in json){ var icur=0; if(attr=='opacity'){ var icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ var icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]){ flag=false; } if(attr=='opacity'){ obj.style.opacity=(icur+speed)/100; obj.style.filter='alpha(opacity:'+(icur+speed)+')'; }else{ obj.style[attr]=icur+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },10) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle(attr); }else{ return getComputedStyle(obj,false)[attr]; } } 那里改了，还是弄两次才行，这是move.js 我每次调用都没啥问题啊

回复 2016-08-23

热搜

最近搜索清空

为什么我不管用onmouseover还是onmouseenter我都必须鼠标滑进划出两次才可以呢？

为什么我不管用onmouseover还是onmouseenter我都必须鼠标滑进划出两次才可以呢？

3 回答

添加回答