js图片随鼠标平面旋转

基础概念

在JavaScript中实现图片随鼠标平面旋转的功能，主要涉及到以下几个基础概念：

事件监听：用于捕捉鼠标的移动事件。
坐标获取：获取鼠标在页面中的实时位置。
角度计算：根据鼠标的位置变化计算出图片应该旋转的角度。
CSS变换：使用CSS的transform属性来应用旋转变换。

类型与应用场景

类型：这是一种基于用户交互的动画效果。
应用场景：适用于各种需要增强用户互动和产品吸引力的网站，如电商平台的商品展示、艺术画廊的在线展览等。

实现步骤与示例代码

以下是一个简单的实现示例，展示了如何让一张图片随着鼠标在页面上的移动而旋转：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rotation with Mouse</title>
<style>
  #rotatingImage {
    width: 200px;
    height: auto;
    transition: transform 0.1s; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<img id="rotatingImage" src="your-image-url.jpg" alt="Rotating Image">

<script>
  const image = document.getElementById('rotatingImage');
  let isDragging = false;
  let startX, startY;

  image.addEventListener('mousedown', (event) => {
    isDragging = true;
    startX = event.clientX;
    startY = event.clientY;
  });

  window.addEventListener('mousemove', (event) => {
    if (!isDragging) return;
    const deltaX = event.clientX - startX;
    const deltaY = event.clientY - startY;
    const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
    image.style.transform = `rotate(${angle}deg)`;
  });

  window.addEventListener('mouseup', () => {
    isDragging = false;
  });
</script>

</body>
</html>