1. Python技术站首页
  2. css

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

• css
yizhihongxing

一、准备工作

  1. 引入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>
  1. 编写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代码

  1. 获取元素并获取相关参数

为了实现放大镜效果，我们需要获取元素，并获取相关参数。在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();
  1. 监听鼠标移动事件

当鼠标在小图区域内移动时，遮罩层和大图区域需要跟随鼠标移动。在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'
  });
});
  1. 悬停显示和隐藏

当鼠标移动到小图区域内时，放大镜效果显示，离开时隐藏。在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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • css ul li 的使用及浏览器兼容问题

    那我来为您讲解一下“CSS ul li的使用及浏览器兼容问题”的攻略。 使用CSS样式修饰 ul li 列表 HTML基础代码 在进行样式修饰之前，我们先需要在HTML中定义一个ul li列表，示例代码如下： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表…

    css 2023年6月10日
    00

  • 关于在vue中实现过渡动画的代码示例

    在Vue框架中实现过渡动画的同时，可以使用一系列的内置过渡类名和钩子函数，这些类名和钩子函数可以帮助我们在Vue应用程序中制作各种类型的过渡动画。下面是如何在Vue应用程序中实现过渡效果的攻略，其中包含了两个示例说明。 1. 简单过渡示例 下面是一个简单的过渡示例。它定义了一个按钮和一个带有简单过渡效果的矩形。当我们点击按钮时，矩形会出现或消失。 <t…

    css 2023年6月10日
    00

  • JS使用getComputedStyle()方法获取CSS属性值

    当我们想要获取一个元素的CSS属性值时，通常会使用 window.getComputedStyle() 方法。这个方法可以获取到元素应用的CSS样式，而这些样式有可能来源于样式表、内嵌样式或直接的行内样式。在获取 CSS 属性时，我们需要注意属性名的写法。如果是驼峰命名法则（如 backgroundColor），则在获取时需要使用小写，即为 backgrou…

    css 2023年6月10日
    00

  • css语法结构

    下面是关于CSS语法结构的详细讲解，希望能够帮到您。 CSS语法结构 CSS是一种用于描述网页上样式和布局的语言。它使用一种名为“CSS规则”的结构来定义样式。每个CSS规则由选择器和一组声明块组成。 CSS规则的基本结构 一个典型的CSS规则由三部分组成： selector { property: value; } 其中，selector表示一组元素需要设…

    css 2023年6月9日
    00

  • Vue.js中NaiveUI组件文字渐变的实现

    下面是“Vue.js中NaiveUI组件文字渐变的实现”的完整攻略。 1. 引入NaiveUI组件库 在Vue.js中使用NaiveUI组件库需要先安装NaiveUI，可以通过npm进行安装： npm install naive-ui 然后，在项目的入口文件（一般是main.js）中引入NaiveUI： import { createApp } from ‘…

    css 2023年6月10日
    00

  • 设置DIV最小高度以及高度自适应随着内容的变化而变化

    设置 DIV 最小高度以及高度自适应随着内容的变化而变化，可以让页面元素更具灵活性和美观性，使页面内容在不同分辨率或浏览器大小的屏幕上呈现出类似的展示效果。下面是具体的操作步骤和示例说明： 设置 DIV 最小高度 通常情况下，我们需要设置 DIV 最小高度，避免内容不足时 DIV 的高度为 0，从而影响页面的美观性。可以使用以下代码设置 DIV 最小高度： …

    css 2023年6月9日
    00

  • 关于HTML5的img标签

    当我们要在网页中展示图片时，就需要使用HTML语言中的img标签。下面我将详细讲解关于HTML5的img标签的使用方法和属性。 语法 img标签的语法如下： <img src="图片URL" alt="图片描述" width="宽度" height="高度"> 其中，…

    css 2023年6月9日
    00

  • html中把多余文字转化为省略号的实现方法方法

    实现方法： 在CSS中使用text-overflow:ellipsis; 属性可以把多余的文字自动转化为省略号。需要注意的是，为了使该属性生效，需要同时设置overflow:hidden;和white-space:nowrap;属性。 示例1： <p class="ellipsis">这是一段非常非常长的文字，它可能显示不完&…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部