如何使div元素移動超過200像素？

Question

我一直在使用jQuery開發一個項目，其中有一個div元素顯示“ click”，當您嘗試單擊它時，它會移動到窗口內的隨機位置。 我遇到的問題是，每隔一段時間div只會移動一點點，而光標仍停留在div內，從而允許用戶單擊鏈接。

我在javascript上還很陌生，我不太確定該如何做這樣的事情。

我當時想我可以做一些事情，例如從舊位置減去新位置，然后檢查它們之間的差異是否小於200像素，如果有，則重新計算數字。 如果那不是您要怎么做，那么我完全可以接受其他方法。

 function setPosition() { var randY = Math.floor(Math.random() * (window.innerHeight - 200)); var randX = Math.floor(Math.random() * (window.innerWidth - 200)); $('#square').animate({ top: randY + 'px', left: randX + 'px' }, 200); } $(document).ready(function() { setPosition() var tries = 0; //tries is just to stop it after it reaches 1000. //I'm planning to make some kind of page to congradulate you on wasting your time. $('#square').mouseenter(function() { if (tries < 1000) { setPosition(); tries += 1; console.log(tries) } }); });

 #square { background: orange; height: 115px; width: 150px; position: relative; text-align: center; padding-top: 35px; } h3, h3 * { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 20px; vertical-align: middle; position: relative; color: black; text-decoration: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <link rel=stylesheet type=text/css href=square.css> <script src=jquery-1.11.3.min.js></script> <script src=square.js></script> </head> <body> <div id=square> <h3><a href=''>Click</a></h3> </div> </body> </html>

Answer 1

我認為您可能要運行隨機邏輯，直到找到距離當前位置200像素以上的組合為止。

在我的頭頂上，就像這樣：

function setPosition() {
   var $square = $('#square');
   var prevY = $square.offset().top;
   var prevX = $square.offset().left;
   var randY, randX;

   do {
       randY = Math.floor(Math.random() * (window.innerHeight - 200));
       randX = Math.floor(Math.random() * (window.innerWidth - 200));
   } while( Math.abs(randY - prevY) < 200 || Math.abs(randX - prevX) < 200 );

   $square.animate({
     top: randY + 'px',
     left: randX + 'px'
   }, 200);
 }

如何使div元素移動超過200像素？

問題描述

1 個解決方案

解決方案1
0 2015-12-02 17:05:50

如何使div元素移動超過200像素？

問題描述

1 個解決方案

解決方案1 0 2015-12-02 17:05:50

解決方案1
0 2015-12-02 17:05:50