3

このような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>

内側の DIV (名前付きの子) をピクセルごとに上から下に 100 ピクセルずつ移動したいと考えています。style.marginTop = '' と settimeout() 関数を使用して実行できると思います

しかし、まだこれを機能させることができません。

4

4 に答える 4

7

バニラ JavaScript で div をアニメーション化する方法は次のとおりです: http://jsfiddle.net/z6F7m/1/

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();

requestAnimationFrameの代わりに使用することを強くお勧めします。setTimeoutブラウザがサポートしていない場合は、にrequestAnimationFrameフォールバックできますsetTimeout。

于 2013-03-01T16:44:54.457 に答える
2

これを試して

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 ピクセルになっているからです。こちらをご覧ください

繰り返しますが、jQuery ソリューションを使用してください。

于 2013-03-01T16:44:40.333 に答える
1

それを行う 1 つの方法は、次のように書くだけで済む jQuery のanimate関数を使用することです。

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

例

于 2013-03-01T16:46:53.413 に答える
0

次のフィドルを確認してください。私は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);

http://jsfiddle.net/pasindur/EbHt5/

于 2013-03-01T16:50:23.347 に答える