如何将Math.random驱动的JavaScript动画限制在Div容器内？

嘿，我看了你遇到的问题啦——那些带文字的白色气泡在鼠标悬停时会跑到容器外面甚至页面不可见区域，对吧？咱们来一步步把它们“关”在中间的容器里！

问题根源分析 #

首先得搞清楚为什么气泡会乱跑：

• 你的气泡元素（#description1-#description4）用了position: relative，这时候设置left/top是相对于它们原本的位置偏移，而不是基于父容器的坐标系，就算你计算了父容器的宽高，偏移后也很容易跑出容器。
• 父容器#container的width: auto会让它撑满整个页面宽度，而且height: 100px太矮，气泡几乎没有移动空间；另外你设置的align-content: center对相对定位的元素也起不到居中作用。
• 随机位置的计算里有多余的加减1操作，可能会导致nextY出现负数，让气泡跑到容器上方外面。

修复方案（完整代码） #

咱们来修改HTML、CSS和JavaScript，让气泡乖乖待在中间的容器里：

HTML部分（给气泡统一加类，简化JS逻辑） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="container">
  <div class="bubble" id="description1" style="width: fit-content; height: 26px; background-color:rgba(255, 255, 255, 0.75); color: #000;  border-radius: 999px; font-weight: bold; text-align: center; margin:8px; padding: 8px 16px 8px 16px;">Lorem Ipsum</div>

  <div class="bubble" id="description2" style="width: fit-content; height: 26px; background-color:rgba(255, 255, 255, 0.75); color: #000;  border-radius: 999px; font-weight: bold; text-align: center; margin:8px; padding: 8px 16px 8px 16px;">Lorem Ipsum</div>

  <div class="bubble" id="description3" style="width: fit-content; height: 26px; background-color:rgba(255, 255, 255, 0.75); color: #000;  border-radius: 999px; font-weight: bold; text-align: center; margin:8px; padding: 8px 16px 8px 16px;">Lorem Ipsum</div>

  <div class="bubble" id="description4" style="width: fit-content; height: 26px; background-color:rgba(255, 255, 255, 0.75); color: #000;  border-radius: 999px; font-weight: bold; text-align: center; margin:8px; padding: 8px 16px 8px 16px;">Lorem Ipsum</div>
</div>

CSS部分（修正定位和容器样式） #

body {
  margin: 0;
  padding: 20px 0;
  background-color: teal;
}

#container {
  max-width: 800px; /* 给容器设置最大宽度，让它在页面中间 */
  width: 100%;
  height: 400px; /* 增加高度，给气泡足够移动空间 */
  margin: 0 auto; /* 让容器水平居中 */
  padding: 0;
  position: relative; /* 这个是关键，让子元素的absolute定位基于它 */
  background-color: rgba(0,0,0,0.1); /* 可选：加个背景色方便看到容器范围 */
}

.bubble {
  position: absolute; /* 改成absolute，基于父容器定位 */
  left: 0; /* 初始位置，可自定义 */
  top: 0;
}

JavaScript部分（合并重复逻辑，修正位置计算） #

jQuery(function($) {
  // 给所有带.bubble类的元素绑定鼠标悬停事件，不用写四次重复代码啦
  $('.bubble').mouseover(function() {
    const $bubble = $(this);
    const $container = $bubble.parent();
    
    // 计算随机位置：范围是0到（容器宽-气泡宽），保证气泡不会超出容器右边界
    const nextX = Math.floor(Math.random() * ($container.width() - $bubble.width()));
    // 同理，范围是0到（容器高-气泡高），不会超出容器下边界
    const nextY = Math.floor(Math.random() * ($container.height() - $bubble.height()));

    $bubble.animate({
      left: `${nextX}px`,
      top: `${nextY}px`
    });
  });
});

关键修改点说明 #

1. 定位方式修正：把气泡的position: relative改成absolute，父容器保持position: relative，这样气泡的left/top就完全基于父容器的左上角坐标系了。
2. 容器样式优化：给容器设置固定的最大宽度并水平居中，增加高度让气泡有足够的移动空间。
3. JS逻辑简化：用类选择器绑定所有气泡的事件，避免重复代码；修正随机位置的计算逻辑，确保生成的坐标不会让气泡超出容器范围（X最大为容器宽-气泡宽，Y最大为容器高-气泡高，最小为0）。
4. 消除边界误差：去掉了原代码中多余的+1/-1，避免出现负数坐标或者超出容器的情况。

这样修改后，你再鼠标悬停气泡，它们就只会在中间的容器里随机移动，不会跑到页面外面啦！

备注：内容来源于stack exchange，提问作者Shayla Merrill