js鼠标悬浮图片特效

JavaScript鼠标悬浮图片特效是一种常见的网页交互效果，它允许用户在鼠标悬停在图片上时触发特定的视觉变化。这种效果可以增强用户体验，使网站更加吸引人。

基础概念

鼠标悬浮图片特效通常涉及以下几种基础概念：

事件监听：使用JavaScript监听鼠标悬停（mouseover）和鼠标离开（mouseout）事件。
CSS样式变化：通过修改图片或其容器的CSS样式来实现视觉效果。
动画效果：可以使用CSS过渡（transitions）或动画（animations）来平滑地改变样式。

类型与应用场景

放大镜效果：鼠标悬停时图片局部放大显示细节。
颜色变化：改变图片或其边框的颜色。
阴影效果：添加或移除阴影以突出图片。
旋转动画：轻微旋转图片以吸引注意。
图片替换：悬停时显示另一张图片。

示例代码

以下是一个简单的JavaScript鼠标悬浮图片放大的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
  .image-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .image-container img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }
  .image-container:hover img {
    transform: scale(1.2);
  }
</style>
</head>
<body>

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

</body>
</html>