2014-09-27 77 views
0

我試圖讓每個元素隨機移動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> 

回答

0

對於實際工作的元素必須有絕對的且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> 
+0

看到這個StackOverflow的答案http://stackoverflow.com/questions/4988214/moving-a-div-left-and右鍵持續 – 2014-09-27 14:50:38

+0

我還沒有得到任何動作:/ – blahblahblah22 2014-09-27 14:52:11

+0

任何javascript錯誤? – 2014-09-27 14:57:15

0

你低估了使用JavaScript DOM元素的複雜性。

使用jQuery可以存檔與運動:

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

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