首頁猿問為什么我不管用onmouseove...

為什么我不管用onmouseover還是onmouseenter我都必須鼠標(biāo)滑進(jìn)劃出兩次才可以呢？

JavaScript

慕仰6432972 2016-08-23 15:15:25

<!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運(yùn)動(dòng)</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="../動(dòng)畫效果/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>時(shí)間</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>每次都需要滑進(jìn)劃出兩次然后才能執(zhí)行完整動(dòng)畫，而且有的時(shí)候還不成功，又沒有朋友能幫我看看這怎么回事?。恐x謝了

查看完整描述

3 回答

已采納

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

第二行var flag=true;要放到setInterval里面，相當(dāng)于每次執(zhí)行flag為true，然后遇到未完成動(dòng)畫就為false，沒有未完成動(dòng)畫就還是true；

如果放在外面，一開始flag為false，那么繼續(xù)循環(huán)flag都是false，而且不會(huì)再變成true，自然后續(xù)函數(shù)無法執(zhí)行

你可以在if(flag)前面放上document.title=flag，然后運(yùn)行看網(wǎng)頁標(biāo)題，無論怎么動(dòng)都是false

反對回復(fù) 2016-08-23

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

回復(fù) 2016-08-24
stone310
恩！不客氣，里面設(shè)置flag=true的執(zhí)行語句也可以！

回復(fù) 2016-08-24

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

這代碼沒問題吧，有個(gè)小地方就是CSS那里filter拼錯(cuò)了，把move.js放出來吧

反對回復(fù) 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 我每次調(diào)用都沒啥問題啊

回復(fù) 2016-08-23