为什么已经清除了队列怎么还是会"卡"的现象啊?
0
悬赏园豆：15
[已关闭问题]
关闭于 2012-05-09 00:07
<!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>
