解析用JavaScript实现JD.COM购物放大镜和标签效果的方法

本文阐述了JavaScript如何实现JD.COM购物放大镜和标签的效果。分享给大家参考，如下：

购物网站点击商品后，会有查看商品图片的功能，可以放大仔细观察商品。这个函数看起来很复杂，但实际上实现起来非常简单。让我们一起做这个小效果吧！

首先，让我们看看页面的布局：

1.小图片显示区有一个方形掩膜层2。缩略图水平列表3。大图片显示区域

然后，我们编写开发步骤：

1.编译三个区域的html布局，使它们位于同一个容器中。2.在区域2显示图片列表。将鼠标悬停事件添加到区域1中的图片。4.将鼠标移到区域1，生成一个半透明的选择框。5.显示与区域2中的选择框相对应的放大图片位置的效果。6.移除区域2并用鼠标将其隐藏。

最后，根据需求编写相应的代码：

Html和css:

样式ul { list-style : none；padd : 0；} .缩放框{位置：相对；宽度： 452 px；} .小盒{ border: 1px固体# ccc相对位置：} .小盒子。square{ position:绝对值；背景-颜色：黄色；opacity: 0.5display:无；} .小盒子。遮罩{ width : 100%；高度： 100%；opa city 3360 0；绝对位置：top:0left:0} .{ clear:两者后的img-list ul :content :“”；display:表；} .img-列表ul li{左侧浮动：padding: 0 8px} .img-list img{ border: 2px固体透明；} .img-list img . active { border : 2px纯红；} .big-box{ position:绝对值；top:0左： 100%；边距-left : 2px；宽度： 500 px；高度： 500 px；border: 1px固体# cccdisplay:无；飞越：隐藏；} .big-box img{ position:绝对值；}/style/head dydiv class=' zoom-box ' div class=' small-box ' img src=' http :/././img/JD。COM放大镜/m1 . jpg ' alt=' Div class=' square '/Div Div class=' mask '/Div/Div class=' img-list ' ul liimg class=' active ' src=' http :/././img/JD。COM放大镜/s1.jpg' alt=' '数据-小='./././img JD.COM放大镜/m1.jpg' data-big='././img/JD。COM放大镜/b1.jpg'/li liimg src=' http:/./img/JD。COM放大镜/s 2 . jpg ' alt=' data-small='.M2.jpg“大数据=”././img/JD。COM放大镜/b2.jpg'/li liimg src=' http:/././img/JD。COM放大镜/s3.jpg' alt=' '数据-小='./.M3.jpg“大数据=”././img/JD。COM放大镜/b3.jpg'/li liimg src=' http:/././img/JD。COM放大镜/s4.jpg' alt=' '数据-小='./.M4.jpg“大数据=”././img/JD。COM放大镜/b4.jpg'/li liimg src=' http:/././img/JD。COM放大镜/s 5 . jpg ' alt=' data-small='./.M5.jpg' data-big='././img/JD。COM放大镜/b5.jpg'/li liimg src=' http:/././img/JD。COM放大镜/s6.jpg' alt=' '数据-小='./.M6.jpg“大数据=”././img/JD。COM放大镜/b 6 . jpg '/Li/ul/div class=' big-box ' img src=' http 3360././img/JD。COM放大镜/b1.jpg' alt=

脚本var smallBox=$(' .小盒子. mask’)；var smallImg=$(' .小盒img ')；var square=$(' .正方形');var imagesList=$all(' .img-list img’)；var bigBox=$(' .大盒子');var bigImg=$(' .大盒img ')；//选项卡切换for(var I=0；长度；i ){ imagesList[i].onmouseover=function(){ for(var j=0；jimageslist . length j){ imagesList[j].class NAmE=} this . class NAmE=' active big img。src=这个。GetAttribute(' data-big ')；小型img。src=这个。GetAttribute(' data-small ')；} } //鼠标移进事件小BOx。onmouseover=function(){ square。风格。display=' block大盒子。风格。display=' block//利用比例公式计算平方的宽高//方形的宽/smallImg的宽=bigBox的宽/bigIma的宽正方形。风格。宽度=小img。偏中间*大盒子。偏移/大img。offset with“px”；正方形。风格。高度=小img。抵消热量*大盒子。偏置热量/大img。偏移热量“px”；};//鼠标移出事件小BOx。onmouseout=function(){ square。风格。显示='无'；大盒子。风格。显示='无'；};//鼠标移动事件小BOx。onmousemove=function(e){ var e=e | | window。事件；var x，y；//x和y的坐标x=e . offsetx-square。offset witth/2；y=e .偏置平方。偏置1/2；if(x0){ x=0；} if(xsmallbox。用-square偏移。偏移量为){ x=小方框。用-square偏移。用.抵消；} if(y0){ y=0；} if(ysmallbox。偏移直角。向右偏移){ y=小方框。偏移直角。向右偏移；}方形。风格。left=x ' px正方形。风格。top=y ' px//利用公式计算大图的坐标//!- //x/？=smallimg.w/bigimg.w - //！- //y/？=小img。h/大img。大img。风格。左=-x *大img。偏移/小img。offset with“px”；大img。风格。top=-y *大img。偏置热量/小img。偏移热量“px”；};函数$(名称){返回文档。queryselector(名称)；} function $ all(name){返回文档。queryselectorall(名称)；}/脚本大家可以做一下看看效果：

添加一个面具的差异是因为，如果直接在小盒子上添加事件，会受到其中的子元素的影响，导致图片抖动。而对一个空内容的面具操作就不会有影响了。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。