js鼠标移动图片切换

基础概念

在JavaScript中，通过监听鼠标的移动事件（如mousemove），可以实现图片随着鼠标移动而切换的效果。这种效果通常用于增强用户界面的交互性和视觉吸引力。

类型与应用场景

轮播图：常见于首页展示，根据鼠标位置切换不同的广告或特色内容。
背景图变换：在网站的背景上根据鼠标移动切换不同的图片，增加视觉趣味性。
互动艺术作品：在艺术或娱乐类网站中，通过鼠标移动来创造动态的艺术效果。

实现方法与示例代码

以下是一个简单的示例，展示了如何使用JavaScript和CSS实现鼠标移动时图片切换的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Switcher on Mouse Move</title>
<style>
  #imageContainer {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
  }
</style>
</head>
<body>

<div id="imageContainer"></div>

<script>
  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片数组
  const container = document.getElementById('imageContainer');

  document.addEventListener('mousemove', function(event) {
    const index = Math.floor((event.clientX / window.innerWidth) * images.length);
    container.style.backgroundImage = `url(${images[index]})`;
  });
</script>

</body>
</html>