效果图

HTML代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         #box {

             width: 860px;

             height: 430px;

             border: 1px solid;

             display: flex;

             margin: 100px auto;

         }

         #box>div {

             width: 430px;

             height: 430px;

             outline: 1px solid;

         }

         #box>div:first-child {

             background-image: url("image/imgA_2.jpg");

             position: relative;

         }

         #box>div:first-child>div {

             width: 231px;

             height: 231px;

             background-color: rgba(0, 0, 0, 0.2);

             position: absolute;

             top: 0;

             left: 0;

             display: none;

         }

         #box>div:first-child:hover div {

             display: block;

         }

         #box>div:last-child {

             background-image: url("image/imgA_3.jpg");

         }

         #box1 {

             margin: auto;

             width: 800px;

             height: 60px;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <div id="left">

             <div id="shadow"></div>

         </div>

         <div id="right"></div>

     </div>

     <div id="box1">

         <img src="data:image/imgA_1.jpg" alt="">

         <img src="data:image/imgB_1.jpg" alt="">

         <img src="data:image/imgC_1.jpg" alt="">

     </div>

 </body>

 </html>

JavaScript 代码示例

 <script>

         let index = 0;

         let arr = ["image/imgA_2.jpg", "image/imgB_2.jpg", "image/imgC_2.jpg"];

         let arr1 = ["image/imgA_3.jpg", "image/imgB_3.jpg", "image/imgC_3.jpg"];

         let img = document.querySelectorAll("img");

         let left = document.querySelector("#left");

         let right = document.querySelector("#right");

         let shadow = document.querySelector("#shadow");

         for (let i = 0; i < img.length; i++) {

             img[i].onmouseover = function () {

                 index = i;

                 left.style.background = `url("${arr[index]}")`;

                 right.style.background = `url("${arr1[index]}")`;

             }

         }

         left.onmousemove = function (event) {

             let e = event || window.event;

             let pagex = e.pageX;//鼠标的位置

             let pagey = e.pageY;

             let shadowZiseX = shadow.offsetWidth;//遮罩div大小

             let shadowZiseY = shadow.offsetHeight;

             let shubiaoX = pagex - box.offsetLeft-shadowZiseX/2 ;//最后遮罩div的移动位置

             let shubiaoY = pagey - box.offsetTop-shadowZiseY/2 ;

             if (shubiaoX <=0) {//如果遮罩div的移动位置大于了X坐标的最小值，那就等于X坐标最小值

                 shubiaoX =0;

             }

             let maxRightX = left.offsetWidth - shadowZiseX;//left盒子空白位置等于：自身宽度-去小盒子宽度；

             if (shubiaoX >= maxRightX) {//如果大于了空白盒子X的最大值那就等于最大值

                 shubiaoX = maxRightX

             }

             if (shubiaoY <=0) {//如果遮罩div的移动位置大于了Y坐标的最小值，那就等于Y坐标最小值

                 shubiaoY=0;

             }

             let maxRightY = left.offsetHeight-shadowZiseY;

             if (shubiaoY >= maxRightY) {//如果大于了空白盒子Y的最大值那就等于最大值

                 shubiaoY = maxRightY

             }

             shadow.style.left = shubiaoX+ "px";//这里是分别给小盒子赋值X,Y坐标的值

             shadow.style.top = shubiaoY+ "px";

             right.style["backgroundPosition"]=`-${shadow.offsetLeft/left.offsetWidth*800}px -${shadow.offsetTop/left.offsetHeight*800}px`;

             //右边的背景图片的移动位置=阴影盒子/left盒子的宽高*自身背景图的大小；

             console.log("woshi"+shadow.offsetTop);

         }

     </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. C#-MDI-多窗口通信方法总结

    总结C#中窗体间传递数据的几种方法 (由别人的方法整理) 转自:http://blog.csdn.net/daisy423xu/article/details/1579854 在编写C#windows ...

  2. win8.1 安装msi软件出现 2503、2502

    问题现象: 安装Msi封包的程序的时候,老是提示 2503 和 2502 错误. 解决办法: 命令提示符提示安装程序权限 右击开始按钮,然后选择命令提示如(管理员)

  3. zbrush书法文字硬边雕刻

    方法的重点在与边缘环的操作以及模型网格的数量. 1.通过ZAppLink功能可以把制作的文字书法映射到模型上去. 2.遮罩,按照颜色强度遮罩. 3.分组,按照颜色分组.单独显示文字部分的分组.按Ctr ...

  4. Power shell 复制文件到远程主机

    昨天因为要复制文件到多个服务器上,感觉一个个复制很麻烦,我就想用Power shell 命令来完成这个任务.具体代码如下: $servers= 'server1' ,'server2' $userna ...

  5. nlog 2.0 强制转换使用 4.0 版本

    今天下午研发代码,发现调用其他小组研发的代码,发现其中有使用nlog功能,但nlog版本是2.0 ,而我的项目使用4.0 版本 导致部分功能不能使用,故在web配置文件中加入以下代码即可 <de ...

  6. [BZOJ 4036][HAOI2015]按位或

    4036: [HAOI2015]按位或 Time Limit: 10 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 746  Solved: 4 ...

  7. globalsign代码签名最新步骤

    1.确认gs发的token里边有你的数字证书-需按对方要求步骤提取到 2. 到globalsign.cn上下载数字签名工具:安装后联系支持.要到该工具对应授权文件 3. (如驱动签名)签名工具> ...

  8. Cinder组件解析

    1  Cinder架构图 Cinder是在虚拟机和具体存储设备之间引入了一层“逻辑存储卷”的抽象,Cinder本身并不是一种存储技术,只是提供一个中间的抽象层,Cinder通过调用不同存储后端类型的驱 ...

  9. JavaScript获取距离某天前或后的日期

    /** * param  Date Object:Mon May 11 13:53:08 UTC+0800 2015  * n 自param 起向后多少天 * return Date Object:M ...

  10. JavaScript的事件概述以及事件对象，事件流

    事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...