为什么不能往回滚动了?

只能每个链接鼠标移动上只执行一次一样,.
比如我鼠标移动到"绿色",然后在移回红色就没效果了?
怎么会这样的?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=bg2312" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>模拟position:fixed</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#focus{position:relative;width:500px;height:150px;}
#focus #num_nav{position:absolute;bottom:0;right:0;z-index:9999;}
#focus #num_nav li{float:left;padding:0 8px;background:#fff;margin-left:1px;display:inline}
#focus_0{background:orange;}
#focus_1{background:red}
#focus_2{background:green}
#focus_3{background:blue}
#focus_4{background:yellow}
.box{width:500px;height:150px;}
#focus_img{position:absolute;top:0px;left:0;}
</style>
<script type="text/javascript">
var n = 0;
function moveElement(y){
var focusimg =  document.getElementById("focus_img");
if(n == y){
return true;
}
if(n > y){
n--;
}
focusimg.style.top = n+"px";
setTimeout("moveElement("+y+")",5)
} function links(){
var num_nav = document.getElementById("num_nav");
var links = num_nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[0].onmouseover = function(){
moveElement(0)
}
links[1].onmouseover = function(){
moveElement(-150)
}
links[2].onmouseover = function(){
moveElement(-300)
}
links[3].onmouseover = function(){
moveElement(-450)
}
links[4].onmouseover = function(){
moveElement(-600)
}
}
}
window.onload = links;
</script>
<body>
<div style="width:500px;margin:0 auto;height:150px;overflow:hidden">
<div id="focus">
<div id="num_nav">
<ul>
<li><a href="">橘色</a></li>
<li><a href="">红色</a></li>
<li><a href="">绿色</a></li>
<li><a href="">蓝色</a></li>
<li><a href="">黄色</a></li>
</ul>
</div> <div id="focus_img">
<div id="focus_0" class="box">
</div>
<div id="focus_1" class="box">
</div>
<div id="focus_2" class="box">
</div>
<div id="focus_3" class="box">
</div>
<div id="focus_4" class="box">
</div>
</div>
</div>
</div>
</body>
</html>

解决方案 »

  1.   

                    function moveElement(y){
                        var focusimg =  document.getElementById("focus_img");
                        if(n == y){
    n = 0;
                            return;
                        }
                        if(n > y){
                            n--;
                        }
                        focusimg.style.top = n+"px";
                        setTimeout("moveElement("+y+")",5)
                    }
      

  2.   


    function moveElement(y) {                    }
                        if (n > y && (-n % 150) == 0 && (-y / 150) - (-n / 150) > 1) {
                            n = 0;
                            n = -((-y / 150) - 1) * 150;
                        }
                        if (y > n && (-n % 150) == 0 && (-n / 150) - (-y / 150) > 1) {
                            n = 0;
                            n = -((-y / 150) + 1) * 150;
                        }
                        var focusimg =  document.getElementById("focus_img");
                        if (n == y) {
                            return true;
                        }
                        if(n > y){
                            n--;
                        }
                        if (n < y) {
                            n++;
                        }
                        focusimg.style.top = n+"px";
                        setTimeout("moveElement(" + y + ")", 5);
                    }
      

  3.   

    上面的第一行多了个 }
    看这个function moveElement(y) {
                        if (n > y && (-n % 150) == 0 && (-y / 150) - (-n / 150) > 1) {
                            n = 0;
                            n = -((-y / 150) - 1) * 150;
                        }
                        if (y > n && (-n % 150) == 0 && (-n / 150) - (-y / 150) > 1) {
                            n = 0;
                            n = -((-y / 150) + 1) * 150;
                        }
                        var focusimg =  document.getElementById("focus_img");
                        if (n == y) {
                            return true;
                        }
                        if(n > y){
                            n--;
                        }
                        if (n < y) {
                            n++;
                        }
                        focusimg.style.top = n+"px";
                        setTimeout("moveElement(" + y + ")", 5);
                    }
      

  4.   

    n=0也可干掉，靠 该睡觉了                function moveElement(y) {
                        if (n > y && (-n % 150) == 0 && (-y / 150) - (-n / 150) > 1) {
                            n = -((-y / 150) - 1) * 150;
                        }
                        if (y > n && (-n % 150) == 0 && (-n / 150) - (-y / 150) > 1) {
                            n = -((-y / 150) + 1) * 150;
                        }
                        var focusimg =  document.getElementById("focus_img");
                        if (n == y) {
                            return true;
                        }
                        if(n > y){
                            n--;
                        }
                        if (n < y) {
                            n++;
                        }
                        focusimg.style.top = n+"px";
                        setTimeout("moveElement(" + y + ")", 5);
                    }