我有一個JS/jQuery代碼，它有兩個按鈕，當光標懸停在其中一個按鈕上時，它會移動到一個隨機位置。

我該怎么做才能不允許按鈕移出視窗，這樣& quot用戶& quot按鈕移動后不需要滾動來找到它。

我試著將溢出設置為隱藏，但正如我所料，它并沒有禁止按鈕出現在區域之外，滾動只是停止顯示。

我想我可能需要給按鈕可以移動的位置設置一個限制，但是我不知道如何去做。

下面是在懸停時生成按鈕隨機位置的腳本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('#random-button').on('mouseover', function() {
            $(this).css({
                'top': Math.random() * window.innerHeight + "px",
                'left': Math.random() * window.innerWidth + "px"
            });
        })
    });
</script>

您必須從Math.random()結果的邊界中減去按鈕的寬度和高度。

$(document).ready(function() {
  $('#random-button').on('mouseover', function() {
    $(this).css({
      'top': Math.random() * (window.innerHeight - $(this).outerHeight()) + "px",
      'left': Math.random() * (window.innerWidth - $(this).outerWidth()) + "px"
    });
        console.log($(this).outerHeight())
  })
});

您可能還想增加或減少填充，這樣它就不會接觸到側面，例如:

const pad = 5
...
'top': pad + Math.random() * (window.innerHeight - $(this).outerHeight() - pad) + "px",
...

JSFiddle演示

首先我要說的是，對于你想要的，你根本不需要jQuery。下載了幾百千字節的數據，這樣你就可以選擇一個元素。JavaScript內置了這個，不需要庫。

所以，基本上你需要測量窗口的大小，然后從0到任意大小中選擇一個半隨機值。

var btn = document.querySelector('#random-button');
var btnRect = btn.getBoundingClientRect();

btn.addEventListener('mouseover', function() {
  btn.style.top = Math.random() * (window.innerHeight - btnRect.height) + "px";
  btn.style.left = Math.random() * (window.innerWidth - btnRect.width) + "px";
}, false);

#random-button {
  position: absolute;
}

<button id="random-button">try to click me</button>

你好我試著這樣做，看看你是否滿足你。

var btn = document.querySelector('#button');
var btnRect = btn.getBoundingClientRect();

function RandomInterval(limit) {
  let random = Math.random() * limit;
  return random;
};
btn.addEventListener('mouseover', function() {
  btn.style.top = RandomInterval(1) * (window.innerHeight - btnRect.height) + "px";
  btn.style.left = RandomInterval(1) * (window.innerWidth - btnRect.width) + "px";
}, false);

#button {
  position: absolute;
}

<button id="button">Click here</button>