0

我是 Javascript 的初学者，并试图制作一个简单的脚本，使用鼠标指针推动一个框。但不幸的是，由于某种原因它不起作用，我希望你们能帮助我。

（这个脚本真的很原始，只是从左边推箱子到现在）。

索引.html：

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

        .css-box{
            width : 100px;
            height : 100px;
            margin : auto;
            background-color : blue;
        }

    </style>
</head>

<body>
    <div id="box" class="css-box"></div>
    <script type="text/javascript" src="script.js"></script>
</body>

脚本.js： 

var box = document.getElementById("box");

var pushBox = function(e){
    if(e.pageX == box.offsetLeft){
        box.style.left = box.style.left + 1 + "px";
    }
};

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

4 回答 4

2

JQuery 版本，但完成与您尝试做的相同

http://jsfiddle.net/3mxC3/1/

我在您的脚本中看到的主要问题是 e.pageX == box.offsetLeft 意味着它只会在 pageX 正好是 offsetLeft 时触发。

mousemove 事件不会触发每个像素，因此这种方法不起作用。完成它的最简单方法是将 mousemove 设置到实际的盒子上（所以它只会在用户鼠标悬停在盒子上时触发）

其次，在盒子上设置 left 属性没有做任何事情，因为左/右是由边距设置的：auto。将其更改为 position: absolute 使其实际上关注 left 属性。

于 2012-07-21T18:20:10.930 回答
1

您需要设置元素position以外的 CSS 属性static，以便 CSSleft属性可以工作。

.css-box{
     position: absolute;
     width : 100px;
     height : 100px;
     margin : auto;
     background-color : blue;
}
于 2012-07-21T18:20:41.920 回答
1

box.style.left是一个字符串。在 JavaScript 中，如果你这样做string + int， int 将被强制转换为字符串，你会得到string + string. 例如，如果box.style.left你10px得到：

'10px' + 1 + 'px'
  int typecasted to string
'10px' + '1' + 'px'
  create one string
'10px1px'

这将是 的值box.style.left。那不是你想要的...

要解决这个问题，您可以使用parseInt()将字符串解析为 int：

box.style.left = parseInt(box.style.left) + 1 + "px";

并且您的 if 仅在光标的 X 位置与box.offsetLeft. 这几乎是不可能的，我不知道你想用它做什么？

至少，box.style.left第一次没有价值。您需要先将值设置为0然后使用事件。

一个工作示例将是：http: //jsfiddle.net/WouterJ/enLwh/（请注意我已添加position: relative;，因为我们不能left在当前位置使用该属性）

更多提示，因为您是 JS 新手：

  • 如果你做这样的事情：

    X = X + 12;

    您可以将其缩短为：

    X += 12;

于 2012-07-21T18:26:18.853 回答
1

最后，您最好在加载时添加内容，而不是让脚本存在于正文中

这是一个位于页面顶部的脚本，其余问题已经由其他人在这里解决

var pushBox = function(e){
    if(e.pageX >= box.offsetLeft){
        box.style.left = (parseInt(box.style.left,10) + 1) + "px";
    }
},box;
window.onload=function() {
  box = document.getElementById("box");
  document.addEventListener("mousemove" , pushBox);
}
于 2012-07-21T18:43:31.883 回答