使用javascript移动Div框
使用javascript移动Div框
提问于 2013-04-04 00:26:47
我正在尝试创建一个300px x 300px的div框，当用户将鼠标放在框上时，它会移动几个像素。唯一的问题是，当div到达浏览器大小的末尾时，我希望它开始以另一种方式移动，而不是让窗口滚动。任何帮助都将不胜感激。
<div style="left:300px; top:300px; width:300px; height:300px; background:blue;>
</div>这是奥列格的代码，我在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15792855
复制相关文章
相似问题