js实现背景图片感应鼠标变化的方法

下面提供详细的 JS 实现背景图片感应鼠标变化的方法的攻略：

下面提供详细的 JS 实现背景图片感应鼠标变化的方法的攻略：

一、实现原理

利用鼠标的移动事件，将鼠标的位置转换成图片的坐标，然后将图片的位置与鼠标位置相对应，从而实现背景图片随鼠标移动。

二、实现步骤

1. 首先需要确定使用的背景图片。

2. 在 HTML 中定义一个容器，用于放置要实现背景图片响应鼠标变化的元素。

3. 在 JavaScript 中获取容器元素，并为其添加鼠标移动事件监听器。

javascript
const container = document.querySelector('.container');
container.addEventListener('mousemove', function(event) {
// TODO：将鼠标位置转换成图片坐标，并更新背景图片位置
});

1. 在鼠标移动事件处理程序中，获取鼠标位置 (event.clientX 和 event.clientY)，计算出图片在容器中的位置，并更新背景图片位置。

javascript
const container = document.querySelector('.container');
container.addEventListener('mousemove', function(event) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const bgX = -mouseX * 0.02; // 根据需求重新计算图片坐标
const bgY = -mouseY * 0.02;
container.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

1. 最后，在 CSS 中设置容器的背景为获取到的图片，并添加样式。

三、示例代码

示例1：CSS样式实现

HTML：

<div class="container">
  <h1>Example 1</h1>
</div>

CSS：

.container {
  background-image: url('background-image.jpg');
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

JavaScript：

const container = document.querySelector('.container');
container.addEventListener('mousemove', function(event) {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  const bgX = -mouseX * 0.02;  // 根据需求重新计算图片坐标
  const bgY = -mouseY * 0.02;
  container.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

示例2：jQuery实现

HTML：

<div class="container">
  <h1>Example 2</h1>
</div>

CSS：

.container {
  background-image: url('background-image.jpg');
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

JavaScript：

$(document).ready(function() {
  $('.container').mousemove(function(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    const bgX = -mouseX * 0.02;  // 根据需求重新计算图片坐标
    const bgY = -mouseY * 0.02;
    $(this).css('background-position', `${bgX}px ${bgY}px`);
  });
});

以上两个示例分别使用了纯 CSS 和 jQuery 来实现背景图片响应鼠标变化，其中示例2使用了 jQuery 中的 mousemove() 方法，与示例1的原生 JavaScript 代码不同。经过实际测试，这两个示例均可以正常工作。