如何動態改變Div位置，它必須是for循環中的絕對位置

Question

如何將div位置x值應用於變量？ 以及如何在for循環中迭代它？

<div id="object"></div>
<style>
  #object{
    position:absolute;
    width:10px;
    height:10px;
    background:#ff8800;
  }
</style>
<script>
  function play(){
    // here how to Add my div position to a variable And Applaying of Iteration In Forloop
    // how to change position Of Its in For loop
    for(){

    }
    // I am Strucked At Here 
 }
 </script>

Answer 1

嘗試使用邏輯播放和停止與一些UI元素。

  var speed = 5; function play(){ if($("#object").data("play")) { setTimeout(function(){ var count = $("#object").position().left; count += speed; $("#object").css("left",count); requestAnimationFrame(play); },500); } } $("#play").click(function(){ $("#object").data("play",true); $('#object').css('background','green'); play(); $('#stop').css('display','block'); }); $("#stop").click(function(){ $("#object").data("play",false); $('#object').css('background','#ff8800'); $('#stop').css('display','none'); });

  input { position:absolute; width:50px; height:25px; top:100px; } #play { background:green; border:none; color:#fff; border-radius:15px; left:35px; } #stop { background:#ff8800; border:none; border-radius:15px; color:#fff; left:35px; display:none; } #object{ position:absolute; width:10px; height:10px; background:#ff8800; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="object"></div> <input id="play" type="button" value="play"> <input id="stop" type="button" value="stop">

Answer 2

您無法使用for循環並在此處設置div新位置來實現此目的。 這是因為JavaScript是單線程的。 我建議你閱讀這個問題的答案，它很好地描述了這個問題。

以某種方式“解鎖”線程，您可以使用setTimeout調用並在其回調中設置新位置。 看看我為你創建的小提琴，向你展示這個方法。 這是JS限制的一種解決方法，但它有效。 正如我在上一段中鏈接的答案所述：

它背后的想法是你給UI一些時間來每隔一段時間更新一次。 由於Javascript中沒有同步休眠函數，實現此目的的唯一方法是使用setTimeout（或具有更復雜邏輯的setInterval）來延遲復雜計算的每個循環的執行。 這將為瀏覽器提供一些時間來更新循環之間的UI，從而同時發生多個事物的視覺效果。 幾毫秒應該足以讓UI反映最新的變化。

但是，在網頁上進行動畫制作的最佳方法是使用CSS過渡。 如果您不僅限於在JS中使用它，我還創建了一個小提示器來向您展示此解決方案（請參閱動畫的流暢程度）。

進一步閱讀：

什么是事件循環呢？ - Philip Roberts的精彩視頻，它將澄清JS線程如何工作以及為什么使用setTimeout '解決'問題
CSS轉換@ W3Schools
流暢高效的網絡動畫 - 做與不做

Answer 3

試試這個...

 <!DOCTYPE HTML>
<html>
<head>
    <title>testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

    <div id="object"></div>
    <input id="play" type="button" value="play">
    <input id="stop" type="button" value="stop">
    <style>
    input
    {
    position:absolute;
    width:50px;
    height:25px;
    top:100px;
    }
    #play
    {
    left:35px;
    }
    #stop
    {
    left:100px;
    }
    #object{
    position:absolute;
    width:10px;
    height:10px;
    background:#ff8800;
    }
    </style>
    <script>
        var _speed = 5;
        function play(){
            if($("#object").data("play"))
            {
                var _x = $("#object").position().left;
                _x += _speed;

                $("#object").css("left",_x);
                requestAnimationFrame(play);
            }
        }
        $("#play").click(function(){
            $("#object").data("play",true);
            play();
        });
        $("#stop").click(function(){
            $("#object").data("play",false);
        });
    </script>
</body>
</html>

如何動態改變Div位置，它必須是for循環中的絕對位置

問題描述

3 個解決方案

解決方案1
4 已采納 2016-09-06 04:05:51

解決方案2
0 2016-09-02 06:47:26

解決方案3
-1 2016-09-02 06:55:55

如何動態改變Div位置，它必須是for循環中的絕對位置

問題描述

3 個解決方案

解決方案1 4 已采納 2016-09-06 04:05:51

解決方案2 0 2016-09-02 06:47:26

解決方案3 -1 2016-09-02 06:55:55

解決方案1
4 已采納 2016-09-06 04:05:51

解決方案2
0 2016-09-02 06:47:26

解決方案3
-1 2016-09-02 06:55:55