jquery鼠标放在小图上即可看大图

基础概念

jQuery鼠标放在小图上即可看大图的功能通常是通过图像悬停效果实现的。这种效果允许用户在不离开当前页面的情况下预览图像的放大版本。这通常涉及到HTML、CSS和JavaScript（特别是jQuery库）的使用。

类型

简单悬停放大：图像在鼠标悬停时简单地放大显示。
弹出预览：鼠标悬停时，一个包含大图的弹出框或遮罩层出现。
滑动切换：在悬停时，可以滑动查看一系列图像的大图。

应用场景

产品展示：电商网站中，用户可以快速查看产品的详细图片。
画廊浏览：艺术作品或摄影作品的在线展览。
社交媒体：用户头像或帖子中的图片预览。

示例代码

以下是一个简单的jQuery示例，展示了如何在鼠标悬停时显示大图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Hover Preview</title>
<style>
  .thumbnail {
    width: 100px;
    height: 100px;
    cursor: pointer;
  }
  #preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('.thumbnail').hover(function(){
    var imgSrc = $(this).attr('src');
    $('#preview').html('<img src="' + imgSrc + '" width="300" height="300">').show();
  }, function(){
    $('#preview').hide();
  });
});
</script>
</head>
<body>

<img class="thumbnail" src="small-image1.jpg" alt="Small Image 1">
<img class="thumbnail" src="small-image2.jpg" alt="Small Image 2">
<div id="preview"></div>

</body>
</html>