如何使用javascript移动Div Box?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (92)

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

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

这是oleg的代码,我在firefox中遇到麻烦,我做错了什么?

<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>
提问于
用户回答回答于

首先创建一个跟踪速度和方向的变量:

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

然后获取对您的框的引用并将事件处理程序附加到其“mouseover”事件:

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';
    });
}

一切都完成了,这里有一个供你玩的小提琴

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

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

动画

如果要为框的移动设置动画,可以尝试CSS动画。只需将以下内容添加到CSS中框的样式声明中:

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

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

关于在浏览器启动时运行脚本的注释:

首先,<script></script>如果要将JavaScript代码嵌入HTML页面,请确保将JavaScript代码包装在代码中。可以运行验证器(例如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

用户回答回答于

根据描述,我认为你想要动画你的div的高度,如果你能够使用Jquery你可以尝试这样的事情:

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

扫码关注云+社区

领取腾讯云代金券