MediaWiki:Common.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// 检查当前页面的标题或 URL 是否符合条件
$(function () {
  // 如果页面上没有 .bouncing-container，则无需执行
  if (!$('.bouncing-container').length) return;

  $('.bouncing-container').each(function () {
    const $container = $(this);
    const $div = $container.find('.bouncing-div');

    // 检查是否启用变色功能
    const changeColor = $container.data('changecolor') === 'yes';

    // 初始化位置和速度
    let x = Math.random() * ($container.width() - $div.width());
    let y = Math.random() * ($container.height() - $div.height());
    let dx = (Math.random() < 0.5 ? -1 : 1) * (2 + Math.random() * 2); // 随机 x 速度
    let dy = (Math.random() < 0.5 ? -1 : 1) * (2 + Math.random() * 2); // 随机 y 速度

    // 设置初始位置
    $div.css({ left: x, top: y });

    // 随机颜色生成函数
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    // 移动和碰撞检测函数
    function move() {
      x += dx;
      y += dy;

      // 碰撞检测
      let collision = false;

      if (x <= 0 || x + $div.width() >= $container.width()) {
        dx = -dx; // 反向 x
        collision = true;
      }
      if (y <= 0 || y + $div.height() >= $container.height()) {
        dy = -dy; // 反向 y
        collision = true;
      }

      // 如果发生碰撞并且启用变色
      if (collision && changeColor) {
        $div.css('background-color', getRandomColor());
      }

      // 更新位置
      $div.css({ left: x, top: y });

      // 使用 requestAnimationFrame 来平滑动画
      requestAnimationFrame(move);
    }

    // 开始动画
    move();
  });
});