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() 乘以 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>

悬停时随机移动按钮：Javascript

1 个答案: