为什么已经清除了队列怎么还是会"卡"的现象啊?

$("list").onmouseover = function(){ 这句,我想让它鼠标移到列表就停止,,该怎么做?<!DOCTYPE HTML>
<html>
<head>
<title>soul42</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<STYLE type="text/css">
    * { margin:0;  padding:0;}
    #box{width:30px;margin:200px auto 0 ;display:block;position:relative;}
.wrap{margin:0;width:200px;position:absolute;top:0;left:0;overflow:hidden;}
    ul{position:absolute;top:0px;left:0;width:200px;}
    li{height:20px;background:orange;margin-bottom:1px}

</STYLE></head>
<body>    <div id="box">sd
<div class="wrap" id="wrap">
<ul style="" id="list">
<li>23</li>
<li>23</li>
<li>23</li>
<li>23</li>
<li>23</li>
<li>23</li>
<li>23</li>
<li>23</li>
</ul>
</div>
    </div>    <script type="text/javascript">
        var tid = null;
        var $ = function(id){return document.getElementById(id)}
var n=0;
var h = "-"+$("list").offsetHeight;
var timer_show = null;
var timer_hide = null;
$("wrap").style.top = "-"+$("list").offsetHeight + "px";
$("wrap").style.height = $("list").offsetHeight + "px";
$("list").style.top = $("list").offsetHeight + "px";
$("list").style.height = $("list").offsetHeight + "px";
var f = typeof parseInt("-"+$("list").offsetHeight) == "number"?parseInt("-"+$("list").offsetHeight):null;
function autoScroll(d){
switch(d){
case 'show':

if(n> -168){
y= Math.ceil((f-n)/10);
if(y > -1){
y = -1;
}
n = n+y;
$("list").style.top = $("list").offsetHeight + n+"px";
timer_show = setTimeout(function(){autoScroll(d)},25)
}else{
clearTimeout(timer_show)
}
break;
case 'hide':
if(n < 0){
n += Math.ceil((0-n)/10);
$("list").style.top = $("list").offsetHeight + n+"px";
timer_hide = setTimeout(function(){autoScroll(d)},25)
}else{
clearTimeout(timer_hide)
}
break;
default:

}
}
        $("box").onmouseover = function(){
console.log("sd")
autoScroll('show')
if(timer_hide){
clearTimeout(timer_hide)
}
        }
        $("box").onmouseout = function(){
if(timer_show){
clearTimeout(timer_show)
}
autoScroll('hide')
        }
        $("list").onmouseover = function(){
clearTimeout(timer_show);
clearTimeout(timer_hide);
        } $("list").onmouseout = function(){
            autoScroll('hide')
        }
    </script></body>
</html>

解决方案 »

  1.   

    主要错在的html上，你的box把list包含了，触发mouseover和mouseout就乱套了，要分开的<!DOCTYPE HTML>
    <html>
    <head>
    <title>soul42</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <STYLE type="text/css">
        * { margin:0;  padding:0;}
        #box{width:30px;margin:200px auto 0 ;display:block;position:relative;}
        .wrap{margin:0;width:200px;position:absolute;top:0;left:0;overflow:hidden;}
        ul{position:absolute;top:0px;left:0;width:200px;}
        li{height:20px;background:orange;margin-bottom:1px}
        
    </STYLE></head>
    <body>    <div id="box"><span id="btn">sd</span> <!--  注释  !!!!!!!!!!!!!!!!!!!!!!!!!!  -->
            <div class="wrap" id="wrap">
                <ul style="" id="list">
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                    <li>23</li>
                </ul>
            </div>
        </div>    <script type="text/javascript">
            var tid = null;
            var $ = function(id){return document.getElementById(id)}
            var n=0;
            var h = "-"+$("list").offsetHeight;
            var timer_show = null;
            var timer_hide = null;
            $("wrap").style.top = "-"+$("list").offsetHeight + "px";
            $("wrap").style.height = $("list").offsetHeight + "px";
            $("list").style.top = $("list").offsetHeight + "px";
            $("list").style.height = $("list").offsetHeight + "px";
            var f = typeof parseInt("-"+$("list").offsetHeight) == "number"?parseInt("-"+$("list").offsetHeight):null;
            function autoScroll(d){
                switch(d){
                    case 'show':
                    
                    if(n> -168){
                        y= Math.ceil((f-n)/10);
                        if(y > -1){
                            y = -1;
                        }
                        n = n+y;
                        $("list").style.top = $("list").offsetHeight + n+"px";
                                timer_show = setTimeout(function(){autoScroll(d)},25)
                    }else{
                            clearTimeout(timer_show)
                    }
                    break;
                    case 'hide':
                    if(n < 0){
                        n += Math.ceil((0-n)/10);                    
                        $("list").style.top = $("list").offsetHeight + n+"px";
                                    timer_hide = setTimeout(function(){autoScroll(d)},25)
                    }else{
                            clearTimeout(timer_hide)
                    }
                    break;
                    default:
                        
                }
            }
            $("btn").onmouseover = function(){
                console.log("sd")
                autoScroll('show')
                if(timer_hide){
                    clearTimeout(timer_hide)
                }
            }
            $("btn").onmouseout = function(){
                if(timer_show){
                        clearTimeout(timer_show)
                }
                autoScroll('hide')
            }
            $("list").onmouseover = function(){
                clearTimeout(timer_show);
                clearTimeout(timer_hide);
            }        $("list").onmouseout = $("btn").onmouseout;

    /*
    function(){
                autoScroll('hide')
            }*/
        </script></body>
    </html>
      

  2.   

    应该说触发box的鼠标事件和list的鼠标事件乱套了
      

  3.   

    那绝对不可能了，我主要就是用chrome的，是你代码没复制全还是我没理解你的“卡”的意思