JavaScript 角度背景图像

在网页设计中，背景图像是一个重要的视觉元素，可以增强网页的视觉效果和吸引力。通过 JavaScript，我们可以实现网页背景图像随着鼠标移动而产生变化的效果，这就是所谓的“角度背景图像”。

实现方式

我们可以使用 CSS 中的 background-image 属性来给网页添加背景图像，然后通过 JavaScript 来实现随鼠标移动而变化的效果。具体实现步骤如下：

1. 在 CSS 中设置背景图像，可以使用绝对路径或相对路径，也可以使用 URL 地址来引用外部图片资源。

   body {
       background-image: url("bg.jpg");
       background-size: cover;
   }
   

2. 在 JavaScript 中获取鼠标在页面中的坐标，可以使用 mousemove 事件和 clientX 与 clientY 属性。

   document.addEventListener("mousemove", function (e) {
       var mouseX = e.clientX;
       var mouseY = e.clientY;
   });
   

3. 根据鼠标的坐标计算出背景图像的旋转角度，可以使用三角函数中的 atan2 函数。

   var rotateX = (window.innerWidth / 2 - mouseX) / 20;
   var rotateY = (window.innerHeight / 2 - mouseY) / 20;
   var deg = Math.atan2(rotateY, rotateX) * (180 / Math.PI) - 90;
   

4. 将计算出来的旋转角度应用到背景图像上，可以使用 CSS 中的 transform 属性。

   document.body.style.backgroundImage = "url('bg.jpg')";
   document.body.style.transform = "translate(-50%, -50%) rotate(" + deg + "deg)";
   

注意事项

1. 为了兼容不同的浏览器，建议使用 window.innerWidth 和 window.innerHeight 来获取视口的大小。

2. 为了保持背景图像的纵横比例，建议使用 background-size: cover 来缩放背景图像。

3. 为了提高性能和避免抖动，建议使用 requestAnimationFrame 来优化代码执行效率。

示例代码

document.addEventListener("mousemove", function (e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    var rotateX = (window.innerWidth / 2 - mouseX) / 20;
    var rotateY = (window.innerHeight / 2 - mouseY) / 20;
    var deg = Math.atan2(rotateY, rotateX) * (180 / Math.PI) - 90;
    document.body.style.backgroundImage = "url('bg.jpg')";
    document.body.style.transform = "translate(-50%, -50%) rotate(" + deg + "deg)";
});

```javascript
document.addEventListener("mousemove", function (e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    var rotateX = (window.innerWidth / 2 - mouseX) / 20;
    var rotateY = (window.innerHeight / 2 - mouseY) / 20;
    var deg = Math.atan2(rotateY, rotateX) * (180 / Math.PI) - 90;
    document.body.style.backgroundImage = "url('bg.jpg')";
    document.body.style.transform = "translate(-50%, -50%) rotate(" + deg + "deg)";
});