光标移动的太快，菜单就出有关问题了。如何解决啊
日期：2014-05-16 浏览次数：20368 次
光标移动的太快，菜单就出问题了。。怎么解决啊 ？
关键是这句话self = oli[i];m=1;
要执行到n>=1后才赋值；
怎么让它只要鼠标移动新的li就赋值。
------解决方案--------------------
li.onmouse
关键是这句话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.onmouse
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
