个人中心
gpt4 book ai didi

javascript - 使用 javascript 移动 Div 框

转载 作者：搜寻专家 更新时间：2023-10-31 22:03:10 24 4
gpt4 key购买 nike

我正在尝试创建一个 300 像素 x 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

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

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;

上面的代码将对 left 中的任何更改进行动画处理。 webkit 浏览器中的属性。您可以添加其他 vendor 前缀(为了与 future 版本兼容而没有前缀)以在支持它的其他浏览器中启用动画。

编辑

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

首先确保将 JavaScript 代码包装在 <script></script> 中如果您将其嵌入到 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相反。

关于javascript - 使用 javascript 移动 Div 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15792855/

24 4 0
文章推荐： php - 如何将变量作为 cURL 数组中的 url 参数传递给 CURLOPT_URL
文章推荐： ios - 我如何在 Swift 中呈现另一个内部的 View Controller ？
文章推荐： html - 响应头 VS 元标签
文章推荐： ios - 如何在 Swift WatchKit 中捕获表格行的按下操作？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com