首页 新闻 赞助 找找看

光标移动的太快,菜单就出问题了。。怎么解决啊 ?

0
悬赏园豆:20 [已关闭问题] 关闭于 2012-06-09 23:12

关键是这句话self = oli[i];m=1;
要执行到n>=1后才赋值;
怎么让它只要鼠标移动新的li就赋值。

<!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>

 

 

深蓝色梦想的主页 深蓝色梦想 | 初学一级 | 园豆:6
提问于:2012-05-31 18:11
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册