3

我正在尝试创建一个 300 像素 x 300 像素的 div 框，当用户将鼠标放在框上时，它会移动几个像素。唯一的事情是当 div 达到浏览器大小的末尾时，我希望它开始以另一种方式移动而不是使窗口滚动。任何帮助将不胜感激。

<div style="left:300px; top:300px; width:300px; height:300px; background:blue;>
</div>

这是我在 Firefox 中运行时遇到问题的 oleg 代码，我做错了吗？

<html>
<head>
<script>
window.onload = function () {
var speed = 10, // the box will move by 10 pixels on every step
direction = 1, // 1 = move right; -1 = move left
boxElement = document.getElementById('theIdOfTheBox');

if (boxElement) {
    boxElement.addEventListener('mouseover', function () {
        // Calculate and store some of the box coordinates:
        var boxLeftPos = boxElement.offsetLeft,
            boxRightPos = boxLeftPos + boxElement.offsetWidth;
        // When right side of the box goes too far - change direction:
        if (boxRightPos > document.body.offsetWidth) {
            direction = -1;
        }
        // When left side of the box goes too far - change direction:
        if (boxLeftPos < 0) {
            direction = 1;
        }
        // Recalculate position:
        boxElement.style.left = (boxLeftPos + speed * direction) + 'px';
    });
 }
};
</script>

<style>
#theIdOfTheBox {
position: absolute;
left:100px;
top:100px;
width:300px;
height:300px;
background:blue;
}
</style>


</head>

<body>
<div id="theIdOfTheBox">box</div>
</body>



</html>
4

5 回答 5

11

首先创建几个变量来跟踪速度和方向：

var speed = 10, // the box will move by 10 pixels on every step
    direction = 1; // 1 moves in the positive direction; -1 vice versa

然后获取对您的框的引用并将事件处理程序附加到其“鼠标悬停”事件：

var boxElement = document.getElementById('theIdOfTheBox');

if (boxElement) {
    boxElement.addEventListener('mouseover', function () {
        // Calculate and store some of the box coordinates:
        var boxLeftPos = boxElement.offsetLeft,
            boxRightPos = boxLeftPos + boxElement.offsetWidth;
        // When right side of the box goes too far - change direction:
        if (boxRightPos > document.body.offsetWidth) {
            direction = -1;
        }
        // When left side of the box goes too far - change direction:
        if (boxLeftPos < 0) {
            direction = 1;
        }
        // Recalculate position:
        boxElement.style.left = (boxLeftPos + speed * direction) + 'px';
    });
}

一切都完成了，这里有一个jsfiddle供您使用。

但是请注意，position: absolute;在 CSS 中，您需要等待 DOM 加载才能安全地执行getElementById操作。

如果您想避免使用偏移量，您可能需要解析和操作框的边距或填充。

动画片

如果你想为你的盒子的移动设置动画，你可以试试 CSS 动画。只需将以下内容添加到 CSS 中框的样式声明中：

-webkit-transition: left 0.3s 0.1s ease-out;

上面的代码将对leftwebkit 浏览器中的任何属性更改进行动画处理。您可以添加其他供应商前缀（并且不添加以与未来版本兼容）以在其他支持它的浏览器中启用动画。

编辑

关于您在浏览器启动时运行脚本的评论：

<script></script>首先，如果要将 JavaScript 代码嵌入 HTML 页面，请确保将其包装在标签中。您可以运行验证器（例如validator.w3.org）以确保您拥有正确的文档结构。

其次，将这些标签中的代码尽可能靠近文档正文的末尾，即</body>.

您还可以将整个 JavaScript 代码包装在一个函数中，该函数将在文档完全加载后执行。通过这种方式，可以从文档头部放置（或远程需要）代码（但你为什么要这样呢？）。这是如何完成的：

window.addEventListener('load', function () {
    // ... the code goes here
});

一个（不推荐的）替代方案是：

window.onload = function () {
    // ... the code goes here
};

或者（请避免这种情况，这只是一个示例）在 HTML 中：

<body onload="someFunction();">

因此，生成的代码可能如下所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* ... the CSS goes here */
    </style>
</head>
<body>
    <div id="box">I'm a box.</div>
    <script>
        // ... the JavaScript code goes here
    </script>
</body>
</html>

关于 Internet Explorer 的特别说明

addEventListener版本 9 以下的 Internet Explorer不支持。您应该attachEvent改用。

于 2013-04-03T16:56:15.960 回答
1 
<script>
 var topPos = 0;
 var leftPos = 0;
 var leftAdder = 1;
 var topAdder = 1;
 var id;

    function move() {  
        clearInterval(id);
        id = setInterval(frame, 3);

        function frame() {

        leftPos = leftPos + leftAdder;
        topPos = topPos + topAdder; 
        document.getElementById("box").style.left = leftPos + 'px'; 
        document.getElementById("box").style.top = topPos + 'px'; 

        if (leftPos == 500) {
            leftAdder = -1;  
        }
        if (topPos == 350) {
            topAdder = -1;  
        }
        if (leftPos == 0) {
            leftAdder = 1;  
        }
        if (topPos == 0) {
            topAdder = 1;  
        }  
        }
    }

    function stop(){
        clearInterval(id);
    }

</script>
于 2018-10-09T15:10:22.060 回答
0

根据描述，我认为您想为 div 的高度设置动画，如果您能够使用 Jquery，您可以尝试以下操作：

$('.div').hover(function() {
    $(this).animate({
        height: $(document).height() - 50
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});

演示：http: //jsfiddle.net/CvhkM/4469/

于 2013-04-03T16:59:18.053 回答
0

这应该有效：

Javascript：

var over = false;
var dir = 0;
var speed = 10;

window.onload = function () {
    var div = document.getElementById("myDiv");
    var top = 10;
    div.onmouseover = function () {
        over = true;
        timer;
    }
    div.onmouseout = function () {
        over = false;
        setTimeout(timer, 1);
    }

    var timer = setInterval(function () {
        //direction
        if (div.offsetTop >= document.body.offsetHeight)
            dir = 1;
        else if (div.offsetTop <= 0)
            dir = 0;


        if (over && div.offsetTop < document.body.offsetHeight && dir == 0) {
            top += speed;
        }
        else if (over && top > 0 && dir == 1)
            top -= speed;

        div.style.top = top + "px";
    }, 100);
};

标记：

<div style="width: 800px; height: 400px">
    <div id="myDiv" style="width: 300px; height: 300px; background: blue; position: absolute">
    </div>
</div>

您的 div 必须位于absolute，第一个 div 将代表您的浏览器。

于 2013-04-03T17:06:06.787 回答
0

如果您希望输入箭头来指示框的移动，我们可以使用此代码。试试看； 

        <script>
            var topPos = 0;
            var leftPos = 0;
            var id;

            function moveRight() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos++; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveLeft() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (leftPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  leftPos--; 
                  document.getElementById("box").style.left = leftPos + 'px'; 
                }
              }
            }

            function moveDown() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 350) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos++; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function moveUp() {  
              clearInterval(id);
              id = setInterval(frame, 10);
              function frame() {
                if (topPos == 0) {
                  clearInterval(id);
                  gameOver();
                } else {
                  topPos--; 
                  document.getElementById("box").style.top = topPos + 'px'; 
                }
              }
            }

            function gameOver(){
                leftPos = 0;
                topPos = 0;
                alert("Game Over...");
                document.getElementById("box").style.top = '0px'; 
                document.getElementById("box").style.left = '0px'; 
            }
        </script>
于 2018-10-10T00:50:06.007 回答