0

我想知道是否有可能做到这一点，当您将鼠标悬停在按钮上以将其向右或向左移动时，它仅移动了 200 像素。因此，一旦它移动了 200px，它就不能再移动 200px，但是一旦它移回原来的位置，它就可以再次移动 200px。

我有这个 javascript 代码

    <script type="text/javascript" language="javascript">
//<![CDATA[

// window.onload=function() {
//    document.getElementById("d2").onmouseover = slideIt("toRight");
//    document.getElementById("d3").onmouseover = slideIt("toLeft");
// };

function slideIt(actionReturn) {
    var slidingDiv = document.getElementById("d1");
    var stopPosition = 50;
    var startPosition = slidingDiv.offsetWidth+slidingDiv.offsetWidth;
    if (actionReturn ==  "toRight") {
        if (parseInt(slidingDiv.style.left) >= 0 )
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
        }
    }
    if (actionReturn ==  "toLeft") {
        if (parseInt(slidingDiv.style.left) < startPosition ) {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
        }
    }
}
//]]>
</script>
4

1 回答 1

0

您需要定义三个标志（即三个变量）来跟踪运动；因此，您需要定义一个表示按钮位于其原始位置，一个表示按钮已向右移动，一个表示按钮已向左移动。这些变量将保存布尔值（真、假）。在每张幻灯片上，您都需要检查这些标志以指定是否会实际发生移位。

这是对您的代码的建议更新：

 <script type="text/javascript" language="javascript">

 var isInOriginalPosition = true;
 var isShiftedToRight = false;
 var isShiftedToLeft = false;

 function slideIt(actionReturn) {
    var slidingDiv = document.getElementById("d1");
    var stopPosition = 50;
    var startPosition = slidingDiv.offsetWidth+slidingDiv.offsetWidth;
    if (actionReturn ==  "toRight") {
        if (isShiftedToRight && !isInOriginalPosition)
        {
            return;
        }
        else if (isShiftedToLeft && !isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToLeft = false;
            isInOriginalPosition = true;
        }
        else if (isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) - 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToRight = true;
            isInOriginalPosition = false;
        }
    }
    if (actionReturn ==  "toLeft") {
        if (isShiftedToLeft && !isInOriginalPosition)
        {
            return;
        }
        else if (isShiftedToRight && !isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToRight = false;
            isInOriginalPosition = true;
        }
        else if (isInOriginalPosition)
        {
            slidingDiv.style.left = parseInt(slidingDiv.style.left) + 200 + "px";
            setTimeout(slideIt, 1);
            isShiftedToLeft = true;
            isInOriginalPosition = false;
        }
    }
}
</script>
于 2012-12-27T19:20:16.740 回答