jQuery实现天猫商品放大镜效果

一、准备工作

引入jQuery库和相关CSS样式文件

在head标签中引入jQuery库jquery.min.js和放大镜样式文件zoom.css。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="./zoom.css">
</head>

编写HTML结构

放大镜效果需要一个大图区域、一个小图区域和一个放大后的图区域，并将它们放置在一个容器中，容器的属性值设置为悬停（hover）时显示。在HTML代码中添加以下结构：

<div class="container">
  <div class="big-img">
    <img src="./img/1.jpg" alt="">
    <div class="mask"></div>
  </div>
  <div class="small-img">
    <img src="./img/1.jpg" alt="">
    <div class="small-mask"></div>
  </div>
  <div class="detail-img">
    <img src="./img/1.jpg" alt="">
  </div>
</div>

大图区域包含一张图片和一个遮罩层，小图区域和大图区域结构相同，只是图片大小不同。最后是用于显示放大后图像的详情区域。

二、编写JS代码

获取元素并获取相关参数

为了实现放大镜效果，我们需要获取元素，并获取相关参数。在JS代码中添加如下代码：

var $bigImg = $('.big-img');
var $smallImg = $('.small-img');
var $detailImg = $('.detail-img');

var bigImgWidth = $bigImg.width();
var bigImgHeight = $bigImg.height();
var smallImgWidth = $smallImg.width();
var smallImgHeight = $smallImg.height();
var detailImgWidth = $detailImg.width();
var detailImgHeight = $detailImg.height();

监听鼠标移动事件

当鼠标在小图区域内移动时，遮罩层和大图区域需要跟随鼠标移动。在JS代码中添加如下鼠标事件代码：

$smallImg.on('mousemove', function(ev) {
  var ev = ev || window.event;
  var x = ev.clientX - $smallImg.offset().left - $('.mask').width() / 2;
  var y = ev.clientY - $smallImg.offset().top - $('.mask').height() / 2;
  if(x < 0) {
    x = 0;
  }else if(x > smallImgWidth - $('.mask').width()) {
    x = smallImgWidth - $('.mask').width();
  }
  if(y < 0) {
    y = 0;
  }else if(y > smallImgHeight - $('.mask').height()) {
    y = smallImgHeight - $('.mask').height();
  }
  $('.mask').css({
    left: x + 'px',
    top: y + 'px'
  });
  var detailX = x * detailImgWidth / ($('.small-img').width() - $('.mask').width());
  var detailY = y * detailImgHeight / ($('.small-img').height() - $('.mask').height());
  $('.detail-img').css({
    left: -detailX + 'px',
    top: -detailY + 'px'
  });
});

悬停显示和隐藏

当鼠标移动到小图区域内时，放大镜效果显示，离开时隐藏。在JS代码中添加如下代码：

$smallImg.hover(function() {
  $('.mask').show();
  $('.detail-img').show();
}, function() {
  $('.mask').hide();
  $('.detail-img').hide();
});

三、完整示例

以下为完整示例代码：

HTML代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery实现天猫商品放大镜效果</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="./zoom.css">
  <style>
    .container {
      width: 600px;
      height: 400px;
      position: relative;
    }

    .big-img, .small-img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .small-img {
      z-index: 2;
      overflow: hidden;
      width: 200px;
      height: 200px;
    }

    .big-img img, .small-img img {
      position: absolute;
    }

    .big-img {
      top: 0;
      left: 0;
      z-index: 1;
      overflow: hidden;
      width: 600px;
      height: 400px;
    }

    .detail-img {
      position: absolute;
      top: 0;
      left: 100%;
      overflow: hidden;
      width: 480px;
      height: 320px;
      z-index: 3;
      display: none;
    }

    .mask, .small-mask {
      position: absolute;
      width: 100px;
      height: 100px;
      background: #000;
      opacity: 0.4;
      cursor: move;
      z-index: 2;
      display: none;
    }

    .small-mask {
      top: 30px;
      left: 30px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="big-img">
      <img src="./img/1.jpg" alt="">
      <div class="mask"></div>
    </div>
    <div class="small-img">
      <img src="./img/1.jpg" alt="">
      <div class="small-mask"></div>
    </div>
    <div class="detail-img">
      <img src="./img/1.jpg" alt="">
    </div>
  </div>

  <script src="./zoom.js"></script>
</body>
</html>

JS代码：

var $bigImg = $('.big-img');
var $smallImg = $('.small-img');
var $detailImg = $('.detail-img');

var bigImgWidth = $bigImg.width();
var bigImgHeight = $bigImg.height();
var smallImgWidth = $smallImg.width();
var smallImgHeight = $smallImg.height();
var detailImgWidth = $detailImg.width();
var detailImgHeight = $detailImg.height();

$smallImg.hover(function() {
  $('.mask').show();
  $('.small-mask').show();
  $('.detail-img').show();
}, function() {
  $('.mask').hide();
  $('.small-mask').hide();
  $('.detail-img').hide();
});

$smallImg.on('mousemove', function(ev) {
  var ev = ev || window.event;
  var x = ev.clientX - $smallImg.offset().left - $('.mask').width() / 2;
  var y = ev.clientY - $smallImg.offset().top - $('.mask').height() / 2;
  if(x < 0) {
    x = 0;
  }else if(x > smallImgWidth - $('.mask').width()) {
    x = smallImgWidth - $('.mask').width();
  }
  if(y < 0) {
    y = 0;
  }else if(y > smallImgHeight - $('.mask').height()) {
    y = smallImgHeight - $('.mask').height();
  }
  $('.mask').css({
    left: x + 'px',
    top: y + 'px'
  });
  $('.small-mask').css({
    left: x + 'px',
    top: y + 'px'
  });
  var detailX = x * detailImgWidth / ($('.small-img').width() - $('.mask').width());
  var detailY = y * detailImgHeight / ($('.small-img').height() - $('.mask').height());
  $('.detail-img').css({
    left: -detailX + 'px',
    top: -detailY + 'px'
  });
});

其中的zoom.css样式文件如下：

.container {
  margin: 100px auto;
}

另外提供一条以jQuery库为基础的函数实现方法的示例：

$.fn.zoom = function() {
  var $this = $(this);
  var $smallImg = $this.find('.small-img');
  var $bigImg = $this.find('.big-img');
  var $mask = $this.find('.mask');
  var $detailImg = $this.find('.detail-img');

  var bigImgWidth = $bigImg.width();
  var bigImgHeight = $bigImg.height();
  var smallImgWidth = $smallImg.width();
  var smallImgHeight = $smallImg.height();
  var detailImgWidth = $detailImg.width();
  var detailImgHeight = $detailImg.height();

  $smallImg.hover(function() {
    $mask.show();
    $detailImg.show();
  }, function() {
    $mask.hide();
    $detailImg.hide();
  });

  $smallImg.on('mousemove', function(ev) {
    var ev = ev || window.event;
    var x = ev.clientX - $smallImg.offset().left - $mask.width() / 2;
    var y = ev.clientY - $smallImg.offset().top - $mask.height() / 2;
    if(x < 0) {
      x = 0;
    }else if(x > smallImgWidth - $mask.width()) {
      x = smallImgWidth - $mask.width();
    }
    if(y < 0) {
      y = 0;
    }else if(y > smallImgHeight - $mask.height()) {
      y = smallImgHeight - $mask.height();
    }
    $mask.css({
      left: x + 'px',
      top: y + 'px'
    });
    var detailX = x * detailImgWidth / (smallImgWidth - $mask.width());
    var detailY = y * detailImgHeight / (smallImgHeight - $mask.height());
    $detailImg.css({
      left: -detailX + 'px',
      top: -detailY + 'px'
    });
  });

  return this;
}

使用方法：

$('.container').zoom();

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现天猫商品放大镜效果 - Python技术站

jQuery实现天猫商品放大镜效果

相关文章