在Javascript中向左和向右移动元素

问题描述：

我试图让每个元素随机移动X和Y方向，每个元素在单击复选框时应该不同。在Javascript中向左和向右移动元素

的代码我有到目前为止....

<div id="exam" class="exam"> 
      Exam 1 
      <input type="button" id="copy" value="Make Copy" onclick="makeCopy()" /> 
      <input type="button" id="array" value="Get Array" onclick="makeArray()" /> 
      <input type="checkbox" id="moving" onclick="doMove()">Making Them Move!! 
    </div> 

    <script> 
    function doMove() { 
      moving.style.left = (moving.style.left+10)+'px'; 
      setTimeout(doMove,1); 
     } 
    </script>

这不是为我工作...有谁知道我怎么能改善功能，使他们动如我上面所述？

这是我现在的代码....

<div id="exam" class="exam"> 
      Exam 1 
      <input type="button" id="copy" value="Make Copy" onclick="makeCopy()" /> 
      <input type="button" id="array" value="Get Array" onclick="makeArray()" /> 
      <input type="checkbox" id="moving" onclick="doMove()">Making Them Move!! 
     </div> 
<script> 
      function doMove() { 
       var moving = document.getElementById("moving"); 
       moving.style.left = (moving.style.left+10)+'px'; 
      } 
      setTimeout(doMove,1000); 
      </script>

答

对于实际工作的元素必须有绝对的且left = 0或东西的位置，如果你想留下改变与JS。这样

<p id="moving" style="position: absolute;left: 500px;">hi</p>

使用CSS这应该是这样的

<script> 
function doMove() { 
     var moving= document.getElementById("moving"); 
     var leftpx = parseInt(moving.style.left); 
     moving.style.left = leftpx + 10 + 'px'; 
     } 

setInterval(doMove,1000);//1000 means 1 sec 

</script>

看到这个*的答案http://*.com/questions/4988214/moving-a-div-left-and右键持续 – 2014-09-27 14:50:38

我还没有得到任何动作：/ – blahblahblah22 2014-09-27 14:52:11

任何javascript错误？ – 2014-09-27 14:57:15

答

你低估了使用JavaScript DOM元素的复杂性。

使用jQuery可以存档与运动：

$("#moving").click(function() { 
    $("#exam").stop().css("marginTop", "0").animate({ 
     marginTop: "+=500" 
     }, 1000, function() { 
      display(""); 
     } 
    ); 
});

DEMO：http://jsfiddle.net/margusmartsepp/dhq5p7n5/1/

在Javascript中向左和向右移动元素

相关推荐