光标移动的太快，菜单就出问题了。。怎么解决啊 ？
关键是这句话self = oli[i];m=1;
要执行到n>=1后才赋值；
怎么让它只要鼠标移动新的li就赋值。
- HTML code
<!doctype html><html> <head> <meta charset="utf-8" /> <style type="text/css"> #myCanvas{ border:1px solid #ccc;} *{margin:0;padding:0;} ul{ margin-left:500px;list-style:none } li{ position:relative;width:100px;line-height:25px;border:1px solid #ccc } .popDiv{ position:absolute;top:0px;left:100px;width:100px;height:50px;background:orange;color:#fff;display:none;opacity:0; } </style> </head> <body> <div id="box">mybox</div><ul id="list"> <li> <a href="" title="iphone_ios">苹果</a> <div class="popDiv"> </div> </li> <li> <a href="" title="安卓_java">google</a> <div class="popDiv"> </div> </li> <li> <a href="" title="wp">微软</a> <div class="popDiv"> </div> </li> <li> <a href="" title="mysql">甲骨文</a> <div class="popDiv"> </div> </li> <li> <a href="" title="全球最大的社交网站">facebook</a> <div class="popDiv"> </div> </li></ul><canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas> <script type="text/javascript"> var list = document.getElementById("list"); var oli = list.getElementsByTagName("li"); var n = 0; var m =0; var timer = null; var ssss = null; var flag = true; for(var i=0; i<oli.length; i++){ var li = oli[i]; li.onmouseover = (function(i){ return function(){ if(n >= 1){ oli[i].getElementsByTagName("div")[0].style.display = "block"; oli[i].getElementsByTagName("div")[0].style.opacity = "1"; self = oli[i]; m=1; timer && clearTimeout(timer); n=0; }else{ n = n+0.200011515; oli[i].getElementsByTagName("div")[0].style.display = "block"; oli[i].getElementsByTagName("div")[0].style.opacity = n; flag = false; timer = setTimeout(arguments.callee,90); } } })(i) li.onmouseout = function(){ if(m <= 0){ self.getElementsByTagName("div")[0].style.display = "none"; self.getElementsByTagName("div")[0].style.opacity = "0"; ssss && clearTimeout(ssss); }else{ m -=0.200011515; self.getElementsByTagName("div")[0].style.opacity = m; console.log(oli[i]) ssss = setTimeout(arguments.callee,90); } } } </script> </body> </html>?[解决办法]
li.onmouseout = function(){
if(m <= 0){
self.getElementsByTagName("div")[0].style.display = "none";
self.getElementsByTagName("div")[0].style.opacity = "0";
ssss && clearTimeout(ssss);
}else{
m -=0.200011515;
self.getElementsByTagName("div")[0].style.opacity = m;
console.log(oli[i])
ssss = setTimeout(arguments.callee,90);
}
}
这里的SELF有问题。。你这样得到的是window。。并不是你想要的上面的oli[i]这个值;
你可以alert(SELF)看看
应该在之前声明var self=null;