0

我刚开始学习 Javascript，并尝试编写一个脚本，允许用户使用鼠标指针左右推动一个框。

当指针触及框的左侧时，我设法解决了这个问题，但我在这里面临两个问题：

  1. 当指针进入框内时，框跳到新坐标。当指针进入盒子时，我希望盒子保持在原来的位置。
  2. 当鼠标触摸到盒子的右侧时，我真的无法弄清楚。我想让盒子向左推。我制作了一个box.offsetRight属性来帮助我，但不能有效地使用它。

这是一张图片来说明我的意思： 在此处输入图像描述

“X”标记是指针所在的位置。并朝着盒子的右侧前进。如何将盒子推到左边？

这是我尝试做的（当然没有用）：

索引.html

<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="helper.js"></script>
        <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 = window.innerWidth - (box.offsetWidth + box.offsetLeft);

var pushBox = function(e){

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

    if (e.pageX >= box.offsetLeft){
        box.style.left = e.pageX + "px";
    } else if(pageXRight >= box.offsetRight){
        box.style.right = pageXRight  + "px";
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;

};

box.addEventListener("mousemove" , pushBox);

我希望使用 Javascript 而不是 Jquery 找到答案。

谢谢。

4

1 回答 1

1

可能的想法给你。听起来像是我在 AS3 中编写的一些轮播。

  1. 当鼠标悬停在盒子的 div 容器上时，您开始在计时器上检查鼠标位置（相当快）。
  2. 使用鼠标 X、div 宽度、框宽度，您可以计算鼠标是在框的左侧还是右侧。您可能希望在框的两侧都有远程命中区域，以便当鼠标将其击到新位置时它会移动。（我假设您的框在其容器内的位置相对 css 将允许 css:left 和 css:right 通过 document.getElementById("xxx").style
  3. 当盒子到达左侧和右侧极限时要小心，因为您仍然想要一个命中区域。

我建议为数字输出创建一些文本框，这样您就可以看到当您的计时器功能检查鼠标位置等时数字是如何变化的，然后您应该能够进行计算。

希望这可以帮助。

于 2012-07-22T15:21:41.790 回答