Javascript |随机移动图片并退出显示

<div id="container">
  <img id="image" src="image.jpg" alt="移动的图片">
</div>

#container {
  position: relative;
  width: 500px;
  height: 500px;
}

#image {
  position: absolute;
  top: 0;
  left: 0;
}

// 获取图片元素
var image = document.getElementById("image");

// 设置图片的初始位置
var initialX = 0;
var initialY = 0;
image.style.top = initialY + "px";
image.style.left = initialX + "px";

// 设置图片的移动范围
var maxX = 400;
var maxY = 400;

// 设置图片的移动速度
var speedX = 2;
var speedY = 2;

// 定义移动图片的函数
function moveImage() {
  // 获取图片当前的位置
  var currentX = parseInt(image.style.left);
  var currentY = parseInt(image.style.top);

  // 计算图片的新位置
  var newX = currentX + speedX;
  var newY = currentY + speedY;

  // 判断是否超出移动范围，如果超出则改变移动方向
  if (newX > maxX || newX < initialX) {
    speedX = -speedX;
  }
  if (newY > maxY || newY < initialY) {
    speedY = -speedY;
  }

  // 更新图片的位置
  image.style.left = newX + "px";
  image.style.top = newY + "px";

  // 循环调用移动图片的函数
  requestAnimationFrame(moveImage);
}

// 启动移动图片的函数
moveImage();