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>