jQuery鼠标悬浮链接弹出跟随图片实例代码

下面是关于jQuery鼠标悬浮链接弹出跟随图片实例代码的完整攻略：

核心思路和步骤
通过jQuery事件监听，实现当鼠标悬浮在链接上时，能够获取到链接的title，即图片的地址
动态创建一个图片元素，将获取到的图片地址设置为该元素的src属性
将创建的图片元素插入到页面中
示例代码说明
下面是一个简单的实现，当鼠标悬浮在链接上时，弹出一张图片来跟随显示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery鼠标悬浮链接弹出跟随图片实例代码</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .pop-img {
      position: absolute;
      z-index: 999;
      display: none;
    }
  </style>
</head>
<body>
  <a href="#" class="pop-link" title="http://www.example.com/image1.jpg">链接1</a>
  <a href="#" class="pop-link" title="http://www.example.com/image2.jpg">链接2</a>
  <a href="#" class="pop-link" title="http://www.example.com/image3.jpg">链接3</a>
  <script>
    $(function() {
      // 当鼠标悬浮在链接上时
      $('.pop-link').hover(function() {
        // 获取图片地址
        var imgSrc = $(this).attr('title');
        // 动态创建图片元素
        var img = $('<img class="pop-img" src="' + imgSrc + '">');
        // 将图片插入到页面中
        $('body').append(img);
        // 显示图片
        img.show();
      }, function() {
        // 鼠标移走时，销毁图片
        $('.pop-img').remove();
      });
    });
  </script>
</body>
</html>

上述代码中，添加了三个链接，当鼠标悬浮在链接上时，会弹出相应的图片。为了实现鼠标移开后图片消失的效果，给创建的img元素添加了class为pop-img，同时设置了display为none，并在鼠标移开时调用remove()方法将其销毁。

另一个示例代码
下面这个示例是在弹出的图片上添加了遮罩和关闭按钮。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery鼠标悬浮链接弹出跟随图片实例代码</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .pop-img-wrap {
      position: absolute;
      z-index: 999;
      display: none;
    }
    .pop-img-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    .pop-img {
      display: block;
      max-width: 800px;
      max-height: 600px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .pop-img-close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#" class="pop-link" title="http://www.example.com/image1.jpg">链接1</a>
  <a href="#" class="pop-link" title="http://www.example.com/image2.jpg">链接2</a>
  <a href="#" class="pop-link" title="http://www.example.com/image3.jpg">链接3</a>
  <div class="pop-img-wrap">
    <div class="pop-img-mask"></div>
    <img class="pop-img">
    <span class="pop-img-close">×</span>
  </div>
  <script>
    $(function() {
      // 关闭弹出框
      function closePopImg() {
        $('.pop-img-wrap').fadeOut(400, function() {
          $(this).remove();
        });
      }
      // 当鼠标悬浮在链接上时
      $('.pop-link').hover(function() {
        // 获取图片地址
        var imgSrc = $(this).attr('title');
        // 动态创建图片元素和遮罩
        var imgWrap = $('<div class="pop-img-wrap">');
        var mask = $('<div class="pop-img-mask">');
        var img = $('<img class="pop-img" src="' + imgSrc + '">');
        var closeBtn = $('<span class="pop-img-close">×</span>');
        // 将图片和遮罩插入到页面中
        imgWrap.append(mask).append(img).append(closeBtn);
        $('body').append(imgWrap);
        // 显示遮罩和图片
        mask.show();
        img.show();
        img.css({
          'left': ($(window).width() - img.width()) / 2,
          'top': ($(window).height() - img.height()) / 2
        });
      }, function() {
        // 鼠标移走时，销毁图片
        $('.pop-img-wrap').remove();
      });
      // 关闭图片
      $('body').on('click', '.pop-img-close', function() {
        closePopImg();
      });
      $('body').on('click', '.pop-img-mask', function() {
        closePopImg();
      });
    });
  </script>
</body>
</html>

上述代码中，第一个示例代码与其相比，主要增加了以下代码：
- 在HTML中添加了一个div元素，用于包裹弹出的图片，并设置其为隐藏
- 在CSS中添加了pop-img-mask和pop-img-close两个样式类，分别用于设置遮罩和关闭按钮样式
- 在JS中使用了jQuery的fadeIn()和fadeOut()方法，分别用于显示和隐藏弹出的图片和遮罩
- 使用了定位和transform属性，用于使图片垂直居中和水平居中
- 通过事件委托的方式，为关闭按钮和遮罩添加了点击事件，以关闭弹出的图片

希望以上说明对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery鼠标悬浮链接弹出跟随图片实例代码 - Python技术站