效果图

HTML代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <style>
  10.          * {
  11.              margin: 0;
  12.              padding: 0;
  13.          }
  14.  
  15.          #box {
  16.              width: 860px;
  17.              height: 430px;
  18.              border: 1px solid;
  19.              display: flex;
  20.              margin: 100px auto;
  21.          }
  22.  
  23.          #box>div {
  24.              width: 430px;
  25.              height: 430px;
  26.              outline: 1px solid;
  27.          }
  28.  
  29.          #box>div:first-child {
  30.              background-image: url("image/imgA_2.jpg");
  31.              position: relative;
  32.          }
  33.  
  34.          #box>div:first-child>div {
  35.              width: 231px;
  36.              height: 231px;
  37.              background-color: rgba(0, 0, 0, 0.2);
  38.              position: absolute;
  39.              top: 0;
  40.              left: 0;
  41.              display: none;
  42.          }
  43.  
  44.          #box>div:first-child:hover div {
  45.              display: block;
  46.          }
  47.  
  48.          #box>div:last-child {
  49.              background-image: url("image/imgA_3.jpg");
  50.  
  51.          }
  52.  
  53.          #box1 {
  54.              margin: auto;
  55.              width: 800px;
  56.              height: 60px;
  57.          }
  58.      </style>
  59.  </head>
  60.  
  61.  <body>
  62.      <div id="box">
  63.          <div id="left">
  64.              <div id="shadow"></div>
  65.          </div>
  66.          <div id="right"></div>
  67.      </div>
  68.      <div id="box1">
  69.          <img src="data:image/imgA_1.jpg" alt="">
  70.          <img src="data:image/imgB_1.jpg" alt="">
  71.          <img src="data:image/imgC_1.jpg" alt="">
  72.      </div>
  73.  
  74.  </body>
  75.  
  76.  </html>

JavaScript 代码示例

  1.  <script>
  2.          let index = 0;
  3.          let arr = ["image/imgA_2.jpg", "image/imgB_2.jpg", "image/imgC_2.jpg"];
  4.          let arr1 = ["image/imgA_3.jpg", "image/imgB_3.jpg", "image/imgC_3.jpg"];
  5.          let img = document.querySelectorAll("img");
  6.          let left = document.querySelector("#left");
  7.          let right = document.querySelector("#right");
  8.          let shadow = document.querySelector("#shadow");
  9.  
  10.          for (let i = 0; i < img.length; i++) {
  11.              img[i].onmouseover = function () {
  12.                  index = i;
  13.                  left.style.background = `url("${arr[index]}")`;
  14.                  right.style.background = `url("${arr1[index]}")`;
  15.              }
  16.          }
  17.          left.onmousemove = function (event) {
  18.              let e = event || window.event;
  19.              let pagex = e.pageX;//鼠标的位置
  20.              let pagey = e.pageY;
  21.              let shadowZiseX = shadow.offsetWidth;//遮罩div大小
  22.              let shadowZiseY = shadow.offsetHeight;
  23.              let shubiaoX = pagex - box.offsetLeft-shadowZiseX/2 ;//最后遮罩div的移动位置
  24.              let shubiaoY = pagey - box.offsetTop-shadowZiseY/2 ;
  25.              if (shubiaoX <=0) {//如果遮罩div的移动位置大于了X坐标的最小值，那就等于X坐标最小值
  26.                  shubiaoX =0;
  27.              }
  28.              let maxRightX = left.offsetWidth - shadowZiseX;//left盒子空白位置等于：自身宽度-去小盒子宽度；
  29.              if (shubiaoX >= maxRightX) {//如果大于了空白盒子X的最大值那就等于最大值
  30.                  shubiaoX = maxRightX
  31.              }
  32.              if (shubiaoY <=0) {//如果遮罩div的移动位置大于了Y坐标的最小值，那就等于Y坐标最小值
  33.                  shubiaoY=0;
  34.              }
  35.              let maxRightY = left.offsetHeight-shadowZiseY;
  36.              if (shubiaoY >= maxRightY) {//如果大于了空白盒子Y的最大值那就等于最大值
  37.                  shubiaoY = maxRightY
  38.              }
  39.              shadow.style.left = shubiaoX+ "px";//这里是分别给小盒子赋值X,Y坐标的值
  40.              shadow.style.top = shubiaoY+ "px";
  41.  
  42.              right.style["backgroundPosition"]=`-${shadow.offsetLeft/left.offsetWidth*800}px -${shadow.offsetTop/left.offsetHeight*800}px`;
  43.              //右边的背景图片的移动位置=阴影盒子/left盒子的宽高*自身背景图的大小；
  44.              console.log("woshi"+shadow.offsetTop);
  45.          }
  46.      </script>

淘宝商品放大镜效果-JavaScript的更多相关文章

  1. canvas+javascript实现淘宝商品放大镜效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  3. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  4. YY一下淘宝商品模型

    淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...

  5. 用PHP抓取淘宝商品的用户晒单评论+图片实例

    为什么想起来做这个功能?是因为前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: ...

  6. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇，超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

  7. python爬虫学习(三)：使用re库爬取"淘宝商品"，并把结果写进txt文件

    第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...

  8. YY淘宝商品数据库设计

    http://www.cnblogs.com/mmmjiang13/archive/2010/11/04/1868609.html 前言 这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很 ...

  9. 仿淘宝商品详情页上拉弹出新ViewController

    新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...

随机推荐

  1. 三年Linux运维工作总结教训

    Linux运维一定要知道的六类好习惯和23个教训,避免入坑! 从事运维三年半,遇到过各式各样的问题,数据丢失,网站挂马,误删数据库文件,黑客攻击等各类问题. 今天简单整理一下,分享给各位小伙伴. 一. ...

  2. HTML学习---基础知识学习

    1.1. HTML 1.为什么要有HTML? "Hello" "<h1>Hello</h1>" - 浏览器渲染时使用一套HTML规则, ...

  3. Retrieving failed records after an SqlBulkCopy exception

    Let me start by saying that the idea I used in this article is not originally mine, but since I have ...

  4. php中的mysql_fetch_row，mysql_fetch_array，mysql_fetch_object

    1.mysql_fetch_row mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元 ...

  5. 四、C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 .NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作,下面就 ...

  6. project euler 169

    project euler 169 题目链接:https://projecteuler.net/problem=169 参考题解:http://tieba.baidu.com/p/2738022069 ...

  7. yarn-site.xml

    要保证spark on yarn的稳定性,避免报错,就必须保证正确的配置,尤其是yarn-site.xml. 首先来理解一下yarn-site.xml各个参数的意义(引自董的博客) 注:下面<v ...

  8. angularJs的工具方法3

    一.angular.version          判断angular的版本 console.log(angular.version); 二.angular.equals           判断两 ...

  9. python 打包文件

    tarfile import tarfile tar = tarfile.open("sk_camera_6018.tar","w") tar.add(full ...

  10. 应用层-Http/Https

    应用层-Http/Https 一.Http 1. 1.1 2. 2.1 3.2 1. 1.1 2. 2.1 3.2 1. 1.1 2. 2.1 3.2 二.Https 1. 1.1 2. 2.1 3. ...