如何动态改变Div位置，它必须是for循环中的绝对位置

How To Change Div Position Dynamically, It Must be Absolute Position in for loop

本文关键字：位置 for 循环 何动态 动态 Div 改变      更新时间：2023-09-26

如何将我的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>

尝试使用播放逻辑并停止使用一些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">

您不能使用for循环并在这里设置div的新位置来实现这一点。这是因为JavaScript是单线程的。我建议你看看这个问题的答案，它很好地描述了这个问题。

要以某种方式"解锁"线程，您可以使用setTimeout调用并在回调中设置新位置。请看我为您创建的小提琴，它向您展示了这种方法的实际应用。这是JS限制的一种变通方法，但它是有效的。正如我在上一段链接的答案中所描述的:

背后的想法是，你给UI一些时间来更新每隔一段时间。由于Javascript中没有同步睡眠函数，因此实现这一点的唯一方法是使用setTimeout(或带有更复杂逻辑的setInterval)来延迟复杂计算的每个循环的执行。这将给浏览器一些时间来更新循环之间的UI，提供多个事情同时发生的视觉效果。几毫秒应该足以让UI反映最新的更改。

然而，在网页上做动画的最好方法是使用CSS转场。如果你不局限于在JS中做这件事，我已经创建了一个小提琴来展示这个解决方案(看看动画是多么流畅)。

进一步阅读:

  • 事件循环到底是什么?-一个伟大的视频由菲利普罗伯茨，这将澄清，JS线程是如何工作的，为什么使用setTimeout"解决"的问题
  • CSS过渡@ W3Schools
  • 流畅高效的网页动画-该做和不该做

try this…

 <!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>
相关文章：