Javascript 如何逐像素移动DIV

我有一个像这样的DIV设置

  <div id="parent" class="parent">
            <div id="child" class="child">
            </div>
   </div>

风格

    <style>
    .parent{
    float:left; height:300; width:300px; background-color:#00ff00;
    }
    .child{
    float:left; height:60; width:60px; background-color:#00ff00;
    }
    </style>


<script>
            function move(){
                while(m < 100){
                document.getElementByid('child').style.marginTop = m;
                m = m+1;
                }
            }
            move();
 </script>

.家长{
浮动：左侧；高度：300；宽度：300px；背景色：#00ff00；
}
.孩子{
浮动：左侧；高度：60；宽度：60px；背景色：#00ff00；
}
函数move（）{
而（m<100）{
document.getElementByid（'child'）.style.marginTop=m；
m=m+1；
}
}
move（）；

我想将内部DIV（命名为child）逐像素从上到下移动100像素。 我认为可以使用style.marginTop=''和settimeout（）函数来完成

但仍然无法使其正常工作。

试试这个

var element = document.getElementById('child');
for (var i=0; i != 100; i++){
    element.style.marginTop += 1;
}

这将循环100次，并在marginTop每个循环中添加1

我建议使用jQuery思想，因为使用jQuery您可以简单地

$("#child").animate({ marginTop: 100 });

编辑

最好的例子没有意义，试试这个

var element = document.getElementById('animated');
    for (var i = 0; i != 100; i++) {
    currentTop = parseInt(element.style.marginTop) || 0;
    newTop = parseInt(currentTop + 1);
    element.style.marginTop = newTop + "px";
}

这也是愚蠢的，因为它的循环速度非常快，当浏览器渲染长方体时，它已经离顶部100像素了

---

同样，请使用。

以下是如何使用香草JavaScript设置div动画：

JavaScript

var elem = document.getElementById('animated'),
    top = parseInt(elem.style.marginTop, 10) || 0,
    step = 1;

function animate() {
    if (top < 100) {
        requestAnimationFrame(animate);
        elem.style.marginTop = top + 'px';
        top += step;
    }
}

animate();

var elem=document.getElementById（'animated'），
top=parseInt（elem.style.marginTop，10）| | 0，
步骤=1；
函数animate（）{
如果（顶部<100）{
请求动画帧（动画）；
elem.style.marginTop=top+‘px’；
顶部+=台阶；
}
}
制作动画（）；

---

我强烈建议您使用

requestAnimationFrame

而不是

setTimeout

，如果浏览器不支持

requestAnimationFrame

，您可以回退到

setTimeout

一种方法是使用jQuery的函数，它只需要编写以下内容：

$(element).animate({ 'top': '100px' });

---

检查以下小提琴。我没有jquery就做到了

 var step = 0;
 window.setInterval(function(){
    var value = (++step)*100;
    if (value<300)
        document.getElementById("child").style.marginTop=value+"px";
    else
       step = -1;
 },1000);

var阶跃=0；
setInterval（函数（）{
var值=（++步进）*100；
如果（值向我们展示您的JavaScript代码。您是指动画制作吗？@dogoku是动画制作。我建议您使用Jquery的动画制作功能来完成这项工作，它可以为您完成大部分繁重的工作。如果不考虑浏览器支持，您也可以使用CSS转换。Paul Irish shim可能也值得包括在内：如果
marginTop
是
'10px怎么办“
，这难道不会使它成为
10px1111…
，我们甚至会有一个动画吗？Top只有在其位置为绝对时才起作用。margin Top最适合这种情况。它也适用于位置：相对-正如您很可能意识到的那样。不知道实际使用的示例，争论哪种方法最适合。