Question

我的目的是使用JavaScript在BODY的范围内移动DIV（框）。它由4个按钮组成，每个按钮垂直和水平移动DIV（减去和加上OnClick事件传递的值）。

我的代码如下（它不起作用:(）：

<style>

#box {
    z-index: 2;
    position: absolute; 
    top: 200px; 
    left: 300px;
    width: 100px; 
    height: 227px; 
    border: none;
}

</style>

<script>

function moveV(i) { 

    var block, vTop, vNum;

    block = document.getElementById('box').style;
    vTop = block.top; 
    vNum = parseInt(vTop); 

    vNum += i; 
    block.top = vNum + "px"; 
} 

</script>

<input type="button" id="btn1" class="btn" onClick="moveV(-20);">
<input type="button" id="btn2" class="btn" onClick="moveH(-20);">
<input type="button" id="btn3" class="btn" onClick="moveV(20);">
<input type="button" id="btn4" class="btn" onClick="moveH(20);">

<div id="box"></div>

另外，另一个问题是，一旦达到身体限制，我不知道如何让它停止。我应该把它放在另一个DIV中，以便限制是“有形的”吗？

Answer 1

使用jQuery会更好，顺便说一句就是：

Read the Viewport Height and Width（or like this in jQuery）;
获取对象，而不是样式（block = document.getElementById('box')）;
阅读block.offsetTop和block.offsetLeft代替style.top和style.left;
在设置新值之前，检查是否大于0并且新值PLUS的宽度和高度不超过Viewport的高度或宽度，;
通过添加“px”来设置style.top和style.left，

> Running Demo

Answer 2

你可以使用jquery：

function moveV(i) { 
    $("#box").animate({top:"+="+i+"px"});
}
function moveH(i) { 
    $("#box").animate({left:"+="+i+"px"});
}

它有效。

使用JavaScript在BODY限制内移动DIV

2 个答案: