一、前言

今天翻阅文件夹看到了之前写过的一个 js 放大镜特效.之所以想要发布在博客上,是因为觉得这个特效里面包含有一定量程度的 js 常用知识点和逻辑性,觉得发出来挺好的,我自己也能在复习掌握一下.我们废话不多说,开整!

二、图示淘宝商品放大镜效果

我这里放了两张从淘宝网上随意点开的商品,查看放大镜效果的图片.也好让我们知道最终效果是什么样和有什么步骤.

图1

图2

以上只是两张静态图,可能没让你们理解那么到位,没看懂的铁子们可以去淘宝pc端随便点击一个商品,我们就能看到这个放大镜效果. 其实它所表述的就是当你移动到下面小图片时,上面左边的图片会显示你移动到的那个小图的图片,并且小图会显示增加黑色边框的效果.然后当你移动左边大图时,右边会显示出一个按照一定比例的大图. 好了,大概就是这样的.

三、需要掌握的知识点

Event 事件源
鼠标移动移出事件
css transform 动画
事件委托

以上三个知识点没有什么可说的,我大概说一下这个事件委托
什么是事件委托?
利用冒泡的原理, 把事件加到父级上, 触发执行效果
好处?
1.提高性能
2.新添加的元素还会有之前的事件

四、放大镜实现原理

在网页中创建两个相同大小的div块,左边的放入图片,设置图片宽高100%,右边的不设置图片百分之百.设置 css 属性超出隐藏.
给左边图片设置一个小方块为了让以后让小方块和右边放大的图片完美显示,需要获取一个比例,
用右边div的宽高除以右边图片宽高,获得比例,然后让左边div块乘以这个比例,这个大小就是小块的比例
当鼠标在左边div内移动的时候,要根据鼠标位置跟随移动,然后限制它的区域,不能移动到这个div块的外面
获取左边的水平移动值,用css动画然后让右边取相反的值移动
设置一些小细节,刚打开网页,或者没有在左边div移动时,让小块和右边的div块隐藏
在左边div小块移动时,让小块和右边div块显示
刚打开网页时,让选中添加的样式隐藏
用ul li标签,在li标签里面放入图片,进行样式排版,设置自定义选中时添加的样式
进行判断,如果移入当前小图,添加样式,并且在上面大图显示当前的图片
离开那个小图时,删除这个添加的样式

五、放大镜代码及注释

我在写这个文件的时候,将 js, css,image,html都分离出了各自的文件夹.以让这个代码显得不会太乱

image 图片:

这个我就不在展示了,可以自行找到相同大小的图片,也可以去淘宝网页在调试台中点击图片,找到对应的图片,进行下载就可以了

css 样式 :

/* 放大镜特效样式 *//* 左边,右边div块 */
#left,#right {width: 400px;height: 400px;/* border: 1px solid red; */float: left;margin: 50px 100px 20px;position: relative;overflow: hidden;
}/* 左边div块内的移动小块 */
.mask {background-color: rgba(0,0,255,0.3);position: absolute;left: 50px;top: 50px;
}/* 选项卡样式 *//* 选项卡div块 */
.xiaoTuList{width: 400px;height: 300px;margin-left: 100px;position: absolute;list-style: none;padding: 0px;margin-top: 0px;
}/* 小图div样式 */
.imgXT {float: left;margin-right: 20px;margin-bottom: 10px;width: 55px;height: 55px;
}/* 小图图片宽高显示 */
.imgXT img {width: 100%;height: 100%;
}/* 定义的一个清除浮动的 class 类 */
.clearFix{clear: both;
}/* 选中时添加的样式 */
.Style {border: 3px solid  orange;
}

js :

// 当页面加载的时候
window.onload = function(){// 获取节点var divLeft = document.getElementById('left')var divRight = document.getElementById('right')var mask = document.querySelector('.mask')var imgListR = document.getElementById('imgListR')// 获取右边块与右边大图的比例var mW = divRight.offsetWidth / imgListR.offsetWidthvar mH = divRight.offsetHeight / imgListR.offsetHeight// 将左边块的大小乘以比例,求出小块的大小var mnW = divLeft.offsetWidth * mWvar mnH = divLeft.offsetHeight * mH// 设置小块的大小mask.style.width = mnW + 'px'mask.style.height = mnH + 'px'// 当在左边块内移动的时候divLeft.onmousemove = function(e){// 获取鼠标位置var left = 0var top = 0if(e.target.className === 'mask'){left = e.offsetX + e.target.offsetLefttop = e.offsetY + e.target.offsetTop}else{left = e.offsetXtop = e.offsetY}// 设置鼠标移动的时候,鼠标指针会处于在小块中间left = left - mask.offsetWidth/2top = top - mask.offsetHeight/2// 设置小块不能移出左边大块,设置最大可移动的宽度值和最高高度值var maskMaxL = divLeft.offsetWidth - mask.offsetWidthvar maskMaxT = divLeft.offsetHeight - mask.offsetHeight// console.log(maskMaxL)// console.log(maskMaxT)if(left < 0){left = 0}else if(left > maskMaxL){left = maskMaxL}if(top < 0){top = 0}else if(top > maskMaxT){top = maskMaxT}// 设置移动时小块的移动位置mask.style.left = left + 'px'mask.style.top = top + 'px'// 设置右边大图移动位置var rightImgL = -left / divRight.offsetWidth * 100 +'%'var rightImgT = -top / divRight.offsetHeight * 100 +'%'// 设置右边大图的动画imgListR.style.transform = "translate("+rightImgL+","+rightImgT+")"}// 鼠标移动进入左边图片时小块和右边图片显示divLeft.onmouseenter = function(){mask.style.display = 'block',divRight.style.display = 'block'}// 鼠标移动离开左边图片时小块和右边图片隐藏divLeft.onmouseleave = function(){mask.style.display = 'none',divRight.style.display = 'none'}// 刚进入网页时,左边div块里面小块隐藏mask.style.display = 'none',// 刚打开网页时,让选中添加的样式隐藏divRight.style.display = 'none'
}

html :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 css --><link rel="stylesheet" href="./css/fdj.css"><!-- 引入 js --><script src="./js/fdj.js"></script><!-- 定义标题 --><title>淘宝放大镜特效</title>
</head>
<body><!-- 设置div块 --><div id="left"><img src="./images/1.jpg" id="imgListL" width="100%" height="100%" alt=""><div class="mask"></div></div><div id="right"><img src="./images/1.jpg" id="imgListR" alt=""></div><div style="clear: both;"></div><ul class="xiaoTuList"><li class="imgXT"><img src="./images/1.jpg" alt=""></li><li class="imgXT"><img src="./images/2.jpg" alt=""></li><li class="imgXT"><img src="./images/3.jpg" alt=""></li><li class="imgXT"><img src="./images/4.jpg" alt=""></li><li class="imgXT"><img src="./images/5.png" alt=""></li><li class="imgXT"><img src="./images/6.jpg" alt=""></li><div class="clearFix"></div></ul><script>// 获取节点var imgListL = document.getElementById('imgListL')var xiaoTuList = document.querySelector('.xiaoTuList')// 当鼠标移动到小图时,添加样式和设置当前选中的图片// 这里用到了 事件委托xiaoTuList.onmouseover=function(ev){var e = ev || window.eventvar targ = e.target || window.srcElementif(targ.nodeName.toLowerCase() == 'img'){targ.className = 'Style'imgListL.src = targ.srcimgListR.src = targ.src}}// // 当鼠标离开小图时,删除添加样式xiaoTuList.onmouseout=function(ev){var e = ev || window.eventvar targ = e.target || window.srcElementif(targ.nodeName.toLowerCase() == 'img'){targ.className = ''}}</script>
</body>
</html>

六、放大镜最终成果

刚打开不使用的样子

使用放大镜的样子

七、放大镜源码

我把这个放大镜效果的文件夹放在百度网盘上,有需要源码的铁子们可以去免费下载

链接：https://pan.baidu.com/s/1ODqlpziL5_kdT1aH-KXRQw
提取码：zbn8
复制这段内容后打开百度网盘手机App，操作更方便哦

八、总结

今天分享的这个放大镜效果,只是我以自己个人的观念以及想法逻辑去写的,每个人在对掌握 js 不同程度的写代码的逻辑和想法不同.我也是个技术一般的前端学习者,肯定有很多地方有更好的写法以及优化的地方.大佬们可以随意指正不足的地方,我愿洗耳恭听,也可以让自己进步.好啦,我们下期见!

用JS实现PC端淘宝查看商品图片放大镜效果相关推荐

vue-element-admin 简单实现仿淘宝实现商品图片放大镜效果
1.HTML <template><div v-loading="Loading" class="goodsUpload"><!- ...
用原生js实现淘宝详情页图片放大镜效果
这个功能是我在模仿淘宝详情页的时候做出来的,最初版本对于非1:1比例的图片没有做处理,后续对程序进行了完善和逻辑上修改,形成了当前的程序. 废话不多说,直接进入正题了,先上个效果图先放上这段功能的h ...
利用python爬取淘宝的商品图片！
代码 from selenium import webdriver from selenium.webdriver.common import keys import time import requ ...
利用python爬取淘宝的商品图片
代码 from selenium import webdriver from selenium.webdriver.common import keys import time import requ ...
通过图片找到桌面相同图片区域坐标_【Axure RP9原型案例】京东与淘宝的商品图片是如何被放大的...
摘要:在电商的商品详情页中我们经常会看到图片放大器的运用,我们以京东商品详情页为例来制作这样的原型效果.案例中综合运用了鼠标移入事件.鼠标移动事件,元件的移动.元件的显示/隐藏等交互动作. 京东示意图 ...
模拟淘宝查看商品时图片的放大效果
要做这样的一个效果,要怎么去实现呢首先,可以分析下整个结构,左边的是原图片,黄色区域在左边覆盖的地方,右边就会对应显示放大后的大图静态页面 <body> <div class=& ...
淘宝天猫商品详情API接口（app、h5端）
淘宝天猫商品详情接口(app.h5端)代码对接可获取到淘宝详情页面数据包括PC端,APP端,H5端,参数包括商品标题,商品价格,商品图片,SKU属性,SKU信息,SKU详情图,库存,数量,销量,评论总 ...
jquery: JS淘宝网产品图片局部放大代码
实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...

用JS实现PC端淘宝查看商品图片放大镜效果

实现放大镜功能