使用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>回答 2
Stack Overflow用户
发布于 2018-10-09 23:10:22
<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>Stack Overflow用户
发布于 2018-10-10 08:50:06
如果您希望输入箭头来指示框的移动，我们可以使用此代码。试着去看看；
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15792855
复制相关文章
相似问题