Question

我一直在使用jQuery进行项目，其中我有一个div元素，表示＆＃34; click，＆＃34;当您尝试单击它时，它会移动到窗口中的随机位置。我遇到的问题是，每隔一段时间div就会移动一点点，让光标仍在div中，允许用户点击链接。

我在javascript上相当新，而且我不太清楚我应该怎么做这样的事情。

我在想我可以做一些事情，比如从旧的位置减去新的位置并检查它们是否有小于200px的差异，如果有的话，重新计算数字。如果你不怎么做，我完全接受其他方法。

＆＃13;

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)
     }
   });
 });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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元素移动超过200px？

1 个答案: