修改

Question

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

Answer 1

首先创建一些跟踪速度和方向的变量：

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

一切都完成了，这是一个 jsfiddle 供你玩。

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

如果你想避免使用偏移量，你可能想要解析和操纵边框或填充框。

<强>动画

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

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

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

修改

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

首先，如果要将JavaScript代码嵌入到HTML页面中，请确保将JavaScript代码包装在<script></script>标记中。您可以运行验证程序（例如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的特别说明

在版本9以下的Internet Explorer中不支持addEventListener。您应该使用attachEvent代替。

Answer 2

<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>

Answer 3

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

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

DEMO： http://jsfiddle.net/CvhkM/4469/

Answer 4

这应该有效：

<强>的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必须位于绝对，第一个div代表您的浏览器。

Answer 5

如果您要输入箭头来指示盒子的移动，我们可以使用此代码。尝试看看；

        <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>

使用javascript移动Div Box

5 个答案:

修改