实现放大镜功能
一、前言二、图示淘宝商品放大镜效果三、需要掌握的知识点四、放大镜实现原理五、放大镜代码及注释六、放大镜最终成果七、放大镜源码八、总结一、前言
今天翻阅文件夹看到了之前写过的一个 js 放大镜特效.之所以想要发布在博客上,是因为觉得这个特效里面包含有一定量程度的 js 常用知识点和逻辑性,觉得发出来挺好的,我自己也能在复习掌握一下.我们废话不多说,开整!
二、图示淘宝商品放大镜效果
我这里放了两张从淘宝网上随意点开的商品,查看放大镜效果的图片.也好让我们知道最终效果是什么样和有什么步骤.
以上只是两张静态图,可能没让你们理解那么到位,没看懂的铁子们可以去淘宝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>
六、放大镜最终成果
七、放大镜源码
我把这个放大镜效果的文件夹放在百度网盘上,有需要源码的铁子们可以去免费下载
链接：/s/1ODqlpziL5_kdT1aH-KXRQw
提取码：zbn8
复制这段内容后打开百度网盘手机App，操作更方便哦
八、总结
今天分享的这个放大镜效果,只是我以自己个人的观念以及想法逻辑去写的,每个人在对 掌握 js 不同程度的写代码的逻辑和想法不同.我也是个技术一般的前端学习者,肯定有很多地方有更好的写法以及优化的地方.大佬们可以随意指正不足的地方,我愿洗耳恭听,也可以让自己进步.好啦,我们下期见!
