悬停时随机移动按钮：Javascript

Question

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

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

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

Answer 1

为mouseover添加事件侦听器，然后使用Math.random() multiplied by Window.innerHeight and 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>

悬停时随机移动按钮：Javascript

Move button randomly on hover: Javascript

html

javascript

css

jquery

hover