jquery实现的鼠标经过悬浮相册缩略

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 09:20:59

　　jquery实现的鼠标经过悬浮相册缩略

jQuery 实现鼠标经过悬浮相册缩略图效果

理解需求

你希望在页面上实现一个相册效果，当鼠标悬停在缩略图上时，能够显示该缩略图的大图预览。这在产品展示、图片展示等场景中非常常见。

实现步骤

1. HTML 结构

HTML

<div class="gallery">
  <img src="image1.jpg" alt="图片1" class="thumbnail">
  <img src="image2.jpg" alt="图片2" class="thumbnail">
  <img src="image3.jpg" alt="图片3" class="thumbnail">
  <div class="preview"></div> </div>

2. CSS 样式

CSS

.gallery {
  position: relative;
}
.thumbnail {
  width: 100px;
  height: 100px;
}
.preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #fff;
  display: none;
}

3. jQuery 代码

JavaScript

$(document).ready(function() {
  $('.thumbnail').hover(function() {
    // 鼠标移入时
    var imgSrc = $(this).attr('src');
    $('.preview').css({
      'background-image': 'url(' + imgSrc + ')',
      'display': 'block'
    });
  }, function() {
    // 鼠标移出时
    $('.preview').hide();
  });
});

代码解释

HTML 结构: 创建一个包含多个缩略图和一个用于显示大图预览的 div。
CSS 样式: 设置缩略图和预览框的样式，包括位置、大小等。
jQuery 代码:
- 绑定鼠标移入和移出事件到每个缩略图上。
- 当鼠标移入时，获取当前缩略图的图片路径，并设置预览框的背景图片为该路径。同时显示预览框。
- 当鼠标移出时，隐藏预览框。

优化与扩展

居中显示预览框: 可以通过计算来设置预览框的 left 和 top 值，使其相对于鼠标的位置居中显示。
放大镜效果: 可以通过计算鼠标在缩略图上的位置，来显示放大后的图片局部。
延迟显示: 可以添加延迟显示效果，避免预览框闪烁。
自定义样式: 可以自定义预览框的样式，例如添加边框、阴影等。
多个预览框: 如果需要同时显示多个预览框，可以为每个缩略图创建一个对应的预览框。
响应式设计: 考虑不同屏幕尺寸下的适配。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>相册悬浮预览</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class   ="gallery">
    <div class="preview"></div> </div>
  <script src="script.js"></script>
</body>
</html>