-2

可能重复：
为什么这不起作用？使用鼠标指针推动一个盒子

这是一个使用鼠标指针推动盒子的脚本，它仅在从左侧推动盒子时才起作用。

我创建了一个数组来获取鼠标指针的位置并确定它是向左还是写入。

这是我到目前为止得到的一个工作示例。

index.js

<html>
    <head>
        <title>Chase the box</title>
        <style>
            body {
            }

            .css-box{
                position: absolute ;
                top:20px;
                width : 100px;
                height : 100px;
                background-color : blue;
            }

            .css-textbox{
                margin-top: 500px;
            }

        </style>
    </head>

    <body>
        <div id="box" class="css-box"></div>
        <div class="css-textbox">            
            <p>All : <input id="allTextbox" type="text"></input></p>
            <p>Left : <input id="leftTextbox" type="text"></input></p>
            <p>Right : <input id="rightTextbox" type="text"></input></p>
            <p>e.pageX(Left) : <input id="pageXTextbox" type="text"></input></p>
            <p>e.pageX(Right) : <input id="pageXRightTextbox" type="text"></input></p>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>

</html>

脚本.js

var box = document.getElementById("box");
var allTextbox = document.getElementById("allTextbox");
var leftTextbox = document.getElementById("leftTextbox");
var rightTextbox = document.getElementById("rightTextbox");
var pageXTextbox = document.getElementById("pageXTextbox");
var PageXRightTextbox = document.getElementById("pageXRightTextbox");

Object.prototype.offsetRight = null;
  
var arr = [];
var pushBox = function(e){
    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
    
    if(arr.length < 2){
        arr.push(e.pageX);
    } else {            
        if(arr[0] < arr[1]){
            if(e.pageX >= box.offsetLeft){
                box.style.left = e.pageX + "px";
            }
        } else if(arr[0] > arr[1]){
            if(pageXRight >= box.offsetRight){
                box.style.right = pageXRight + "px";
            }
        }
        
        arr.shift(arr[0] , arr[1]);        
    }
    
    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}


document.addEventListener("mousemove" , pushBox);
4

1 回答 1

1

问题出在两个地方：

  1. 您不应该同时设置左右两个 css 属性，这会混淆应该指定位置的浏览器。如果设置一个，则将另一个设置为空。

  2. 看我下面的评论

我还稍微修改了您的脚本，因为 arr[0] 和 arr[1] 不容易阅读，因为它们没有传达它们的含义，因此我为数组值分配了一个变量以提高可读性。

快乐推。

var pushBox = function(e){
    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);

    if(arr.length < 2){
    arr.push(e.pageX);
    console.log(JSON.stringify(arr));
    } else {

    var previousX = arr[0];
    var newX = arr[1];

    if(previousX < newX){
                // add e.pageX <= box.offsetRight to ensure that mouse appearance to the right of the box would not push the box
        if(e.pageX >= box.offsetLeft && e.pageX <= box.offsetRight){
        box.style.right = null;
        box.style.left = e.pageX + "px";
        }
    } else if(previousX > newX){
        if(pageXRight >= box.offsetRight){
        box.style.left = null;
        box.style.right = pageXRight + "px";
        }
    }

    arr.shift(arr[0] , arr[1]);        
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}
于 2012-07-22T20:00:01.280 回答