Question

我想知道是否可以这样做，以便当您将鼠标悬停在向右或向左移动时，它只移动了200px。因此，一旦移动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>

Answer 1

你需要定义三个标志（即三个变量）来跟踪运动;这样你需要定义一个指示按钮位于其原始位置的按钮，一个用于指示按钮已向右移动，另一个用于指示按钮已向左移动。这些变量将保存布尔值（true，false）。在每张幻灯片中，您需要检查这些标志以指定是否实际发生班次。

以下是对代码的建议更新：

 <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>

如何制作一个按钮，只能将其拖动到一定程度？

1 个答案: