悬停时随机移动按钮：Javascript [重复]

Posted 2023-03-06

【中文标题】悬停时随机移动按钮：Javascript [重复]

【英文标题】：Move button randomly on hover: Javascript [duplicate]

【发布时间】：2021-08-30 15:47:43

【问题描述】：

我有一个按钮，我想在悬停时随机移动。我希望它能够在任何地方移动，而不是伪随机，而是真正随机。代码我只让按钮转到右下角。

另外，如果可能的话，如果你能制作一个动画来使动画流畅，那将不胜感激。

document.addEventListener("mouseover", function (event) 
    x = event.pageX;
    y = event.pageY;
    div.style.left = x + 35 + "px";
    div.style.top = y + 35 + "px";
);

【问题讨论】：

mouseover 事件监听器应该附加到您想要悬停的元素上，而不是整个文档。

将35 替换为Math.random() * 35 之类的，以获得0 到35 之间的随机数。

【参考方案1】：

为mouseover添加一个事件监听器，然后使用Math.random()乘以Window.innerHeight和Window.innerWidth生成随机坐标：

$('button').on('mouseover', function() 
  $(this).css(
    'top': Math.random() * window.innerHeight + "px",
    'left': Math.random() * window.innerWidth + "px"
  );
)

button 
  position: absolute;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Try to click me!</button>

为了流畅，我们可以使用jQuery的animate()函数：

$('button').on('mouseover', function() 
  $(this).animate(
    'top': Math.random() * window.innerHeight + "px",
    'left': Math.random() * window.innerWidth + "px"
  , "medium");
)

button 
  position: absolute;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Try to click me!</button>