100分求助，js点击按钮图片左右移动问题

Question

本帖最后由 cmlibo 于 2010-08-03 11:36:16 编辑

Answer 1

加一句红色的
function MoveTopMenu(direction)
{
    var left = parseInt(document.getElementById("topMenu").style.left);
    clearInterval(moveInternal);    if(direction == "right")
    {
.....

Answer 2

试试加个全局的状态标志var moveflag = 0;//移动状态0
var menuCount;
var menuIndex;
var moveInternal;
var targitLeft;
var step = 5;function MoveTopMenu(direction)
{
    if(moveflag){return;}
    var left = parseInt(document.getElementById("topMenu").style.left);
    if(direction == "right")
    {
        targitLeft = left - 95;
        if(left > -478)
        {
            moveflag = 1;//
            moveInternal = window.setInterval("ScrollRightTopMenu();", 20);
        }        
    }
    else if(direction == "left")
    {
        targitLeft = left + 95;
        if(left < 0)
        {
            moveflag = 1;//
            moveInternal = window.setInterval("ScrollLeftTopMenu();", 20);
        }
    }
    
}
function ScrollRightTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left);    if(left > -475 && left > targitLeft)
    {
        left -= step;
        document.getElementById("topMenu").style.left = left;
        document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft.gif";    
    }
    else
    {
        clearInterval(moveInternal);
        moveflag = 0;//
        if(left == -475)
        {
            document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright_.gif";
            
        }
    }
}
function ScrollLeftTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left);
    if(left < 0 && left < targitLeft)
    {
        left += step;
        document.getElementById("topMenu").style.left = left;
        document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright.gif";
        
    }
    else
    {
        clearInterval(moveInternal);
        moveflag = 0;//
        if(left == 0)
        {
            document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft_.gif";
        }
    }
}

Answer 3

sd5816690 这个在ie下效果很好，在Firefox下，图片都不滚动了

Answer 4

slowhand 的，在Firefox3.6下，图片也是不滚动了，有点纠结。

Answer 5

刚才回答了就去吃饭去了
又看了一下，left 没有加"px"，这个在FIREFOX里是必须的
var moveflag = 0;//移动状态0
var menuCount;
var menuIndex;
var moveInternal;
var targitLeft;
var step = 5;function MoveTopMenu(direction)
{
    if(moveflag){return;}
    clearInterval(moveInternal);
    var left = parseInt(document.getElementById("topMenu").style.left.replace(/^(-?\d+).*?$/, "$1"));
    if(direction == "right")
    {
        targitLeft = left - 95;
        if(left > -478)
        {
            moveflag = 1;//
            moveInternal = window.setInterval("ScrollRightTopMenu();", 20);
        }        
    }
    else if(direction == "left")
    {
        targitLeft = left + 95;
        if(left < 0)
        {
            moveflag = 1;//
            moveInternal = window.setInterval("ScrollLeftTopMenu();", 20);
        }
    }
    
}
function ScrollRightTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left.replace(/^(-?\d+).*?$/, "$1"));    if(left > -475 && left > targitLeft)
    {
        left -= step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft.gif";    
    }
    else
    {
        clearInterval(moveInternal);
        moveflag = 0;//
        if(left == -475)
        {
            document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright_.gif";
            
        }
    }
}
function ScrollLeftTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left.replace(/^(-?\d+).*?$/, "$1"));
    if(left < 0 && left < targitLeft)
    {
        left += step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright.gif";
        
    }
    else
    {
        clearInterval(moveInternal);
        moveflag = 0;//
        if(left == 0)
        {
            document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft_.gif";
        }
    }
}

Answer 6

var menuCount = 6;
var menuIndex = 0;
var menuWidth = 95;
var moveInternal = 0;
var step = 5;function MoveTopMenu(direction) {
    clearInterval(moveInternal);
    if (direction == "right") {
        if (menuIndex + 1 < menuCount) {
menuIndex++;
            moveInternal = window.setInterval("ScrollRightTopMenu();", 20);
        }
    } else if (direction == "left") {
        if (menuIndex - 1 >= 0) {
menuIndex--
            moveInternal = window.setInterval("ScrollLeftTopMenu();", 20);
        }
    }
}
function ScrollRightTopMenu() {
    var left = parseInt(document.getElementById("topMenu").style.left);
    if (left > -475 && left > menuIndex * -menuWidth) {
        left -= step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft.gif";
    }else {
        clearInterval(moveInternal);
        if (left == -475) {
            document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright_.gif";
        }
    }
}
function ScrollLeftTopMenu() {
    var left = parseInt(document.getElementById("topMenu").style.left);
    if (left < 0 && left < menuIndex * -menuWidth) {
        left += step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright.gif";
    } else {
        clearInterval(moveInternal);
        if (left == 0) {
            document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft_.gif";
        }
    }
}

Answer 7

修改地方:
 一,增加isScroll表示是否在滚动中.
 二,style.left = left改为style.left = left + "px"<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"  />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head><body>
<!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=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="http://www.gold4power.com/CSS/default.css">
<script type="text/javascript">
<!--
var menuCount;
var menuIndex;
var moveInternal;
var targitLeft;
var step = 5;
var isScroll = false;function MoveTopMenu(direction)
{
    if(isScroll){return;}
    var left = parseInt(document.getElementById("topMenu").style.left);
    if(direction == "right")
    {
        targitLeft = left - 95;
        if(left > -478)
        {
            moveInternal = window.setInterval("ScrollRightTopMenu();", 20);
        }
        else
        {
            clearInterval(moveInternal);
            isScroll = false;
        }    }
    else if(direction == "left")
    {
        targitLeft = left + 95;
        if(left < 0)
        {
            moveInternal = window.setInterval("ScrollLeftTopMenu();", 20);
        }
        else
        {
            clearInterval(moveInternal);
        }
    }}
function ScrollRightTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left);    if(left > -475 && left > targitLeft)
    {
        isScroll = true;
        left -= step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft.gif";
    }
    else
    {
        clearInterval(moveInternal);
        isScroll = false;
        if(left == -475)
        {
            document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright_.gif";        }
    }
}
function ScrollLeftTopMenu()
{
    var left = parseInt(document.getElementById("topMenu").style.left);
    if(left < 0 && left < targitLeft)
    {
        isScroll = true;
        left += step;
        document.getElementById("topMenu").style.left = left + "px";
        document.getElementById("topMenuRight").src = "http://www.gold4power.com/templates/images/menuright.gif";    }
    else
    {
        clearInterval(moveInternal);
        isScroll = false;
        if(left == 0)
        {
            document.getElementById("topMenuLeft").src = "http://www.gold4power.com/templates/images/menuleft_.gif";
        }
    }
}
//-->
</script>
</head><body>
<div style="height:30px; width:520px; margin-left:10px;">
  <div style=" float:left;width:29px;"><a style="cursor:pointer;" onClick="MoveTopMenu('left')"><img id="topMenuLeft" src="http://www.gold4power.com/templates/images/menuleft_.gif"></a></div>
  <div style="float:left;width:465px; height:30px; position:relative; overflow:hidden; margin-right:5px;">
    <div id="topMenu" style="position:absolute; left:0px; top:0px;">
      <ul>
        <li style="background-image:url(http://www.gold4power.com/templates/images/menucurrent.gif);"><a href="http://www.gold4power.com/Powerleveling.World-of-Warcraft-EU/instance.aspx" style="color:#fff;">Instance</a></li>
        <li><a href="package.aspx">Package</a></li>
        <li ><a href="gears.aspx">Gears</a></li>
        <li><a href="arenapoints.aspx">Arena</a></li>
        <li><a href="honor.aspx">Honor</a></li>
        <li><a href="skill.aspx">Skill</a></li>
        <li><a href="achievement.aspx">Achievement</a></li>
        <li><a href="reputations.aspx">Reputation</a></li>
        <li><a href="miscellaneous.aspx">Miscellaneous</a></li>
        <li><a href="emblem.aspx">Emblem</a></li>
      </ul>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style=" float:left;width:21px; text-align:right;"><a style="cursor:pointer;" onClick="MoveTopMenu('right')"><img id="topMenuRight" src="http://www.gold4power.com/templates/images/menuright.gif"></a></div>
  <div style="clear:both"></div>
</div>
</body>
</html></body>
</html>

Answer 8

感谢上面各位，等我在网站上测试后，给你们加分。
总结一下：
sd5816690 第一个方法可以解决IE下的问题，在firefox下无效。也许在Firefox下还要加一些东西。
第二个方法 给left加上了px，良好的解决了问题，不知道还有没有更好的方法。
slowhand 的方法，因为left没有加px，在Firefox下失效，但思路是正确的。
Free_Wind22 的方法，可以解决连续点击失效问题，但是滚动的宽度变了，需要修改。
kevinwon1985 的方法 和 sd5816690 的思路，基本是一样的。同样解决了问题。