JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
程序员文章站
2023-12-01 19:33:04
本文实例讲述了javascript实现多张图片放大镜效果。分享给大家供大家参考,具体如下:
效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居...
本文实例讲述了javascript实现多张图片放大镜效果。分享给大家供大家参考,具体如下:
效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居中效果
代码如下,除了图片要替换一下,其它的可直接运行查看效果,enlarge是图片要放大查看的倍数,注意:.bigbox的宽高与.tool的宽高比值要与enlarge保持一致,比如本例中这个比值是4
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <script> function fontauto() { document.documentelement.style.fontsize = document.documentelement.clientwidth / 19.2 + 'px'; } fontauto(); window.onresize = function () { fontauto(); } </script> <style type="text/css"> * { margin: 0; padding: 0; } /*图片放大镜*/ .result-list li { float: left; width: 3rem; margin: 0.15rem; border: 1px solid #ddd; padding: 0.08rem; border-radius: 0.05rem; list-style-type: none; } .result-list li:hover { box-shadow: 0 0 10px 5px #ddd; } .img-to-big { width: 100%; height: 1.5rem; margin: 0 auto; } .small-box { width: 100%; height: 1.5rem; border: 1px #ccc solid; cursor: move; position: relative; vertical-align: middle; display: block; } .small-box img { max-width: 100%; max-height: 100%; margin: auto; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .tool { width: 1rem; height: 1rem; background-color: lightgray; opacity: 0.6; filter: alpha(opacity=60); position: absolute; left: 0; top: 0; display: none; } .tool.active { display: block; } .big-box { width: 4rem; height: 4rem; overflow: hidden; border: 2px solid lightgray; position: absolute; background: #fff; display: none; left: 3rem; z-index: 100; } .big-box.active { display: table-cell; vertical-align: middle; } .big-box img { position: absolute; display: block; } /*图片放大镜*/ </style> </head> <body> <div class="result-list"> <ul> <li> <div class="img-to-big"> <div class="small-box"> <img class="small-img" src="img/zs2.jpg"/> <div class="tool"></div> </div> <div class="big-box"> <img src="img/zs2.jpg" class="big-img"/> </div> </div> </li> <li> <div class="img-to-big"> <div class="small-box"> <img class="small-img" src="img/zs2.jpg"/> <div class="tool"></div> </div> <div class="big-box"> <img src="img/zs2.jpg" class="big-img"/> </div> </div> </li> <li> <div class="img-to-big"> <div class="small-box"> <img class="small-img" src="img/zs2.jpg"/> <div class="tool"></div> </div> <div class="big-box"> <img src="img/zs2.jpg" class="big-img"/> </div> </div> </li> <li> <div class="img-to-big"> <div class="small-box"> <img class="small-img" src="img/zs2.jpg"/> <div class="tool"></div> </div> <div class="big-box"> <img src="img/zs2.jpg" class="big-img"/> </div> </div> </li> </ul> </div> <script> window.onload = function () { forimg(); window.onresize = function () { forimg(); }; } function forimg() { var enlarge = 4; var imgtobig = document.getelementsbyclassname("img-to-big"); var list = document.getelementsbyclassname("result-list")[0]; for (var i = 0; i < imgtobig.length; i++) { var smallbox = imgtobig[i].getelementsbyclassname("small-box")[0];//小盒子 var smallimg = smallbox.getelementsbyclassname("small-img")[0]; var tool = imgtobig[i].getelementsbyclassname("tool")[0];//小盒子中的灰色区域 var bigbox = imgtobig[i].getelementsbyclassname("big-box")[0];//大盒子 bigbox.style.left = smallbox.offsetleft + smallbox.offsetwidth + "px"; bigbox.style.top = smallbox.offsettop + "px"; var bigimg = imgtobig[i].getelementsbyclassname("big-img")[0];//放大的图片 var leftnum = smallbox.offsetparent; var num = leftnum.offsetleft; imgsize(smallbox, smallimg, smallimg.getattribute("src"), bigimg, enlarge); tobigimg(smallbox, tool, bigbox, bigimg, num, smallimg, list, enlarge); } function imgsize(smallbox, thisimg, src, bigimg, enlarge) { var img = new image(); img.src = src; img.onload = function () { var realwidth = img.width; var realheight = img.height; if ((realwidth / smallbox.offsetwidth) >= (realheight / smallbox.offsetheight)) {//当展示的图片尺寸并不统一时,根据图片长宽比例确定图片以高度还是宽度为准进行缩放展示 thisimg.style.width = smallbox.offsetwidth + "px"; thisimg.style.height = "auto"; bigimg.style.width = smallbox.offsetwidth * enlarge + "px"; bigimg.style.height = "auto"; } else { thisimg.style.height = smallbox.offsetheight + "px"; thisimg.style.width = "auto"; bigimg.style.height = smallbox.offsetheight * enlarge + "px"; bigimg.style.width = "auto"; } } } function tobigimg(smallbox, tool, bigbox, bigimg, num, smallimg, list, enlarge) { smallbox.onmouseenter = function () { tool.classname = "tool active"; bigbox.classname = "big-box active"; }; //鼠标离开小盒子区域,不显示黄色区域和大盒子 smallbox.onmouseleave = function () { tool.classname = "tool"; bigbox.classname = "big-box"; }; //鼠标在小盒子内移动 smallbox.onmousemove = function (e) { var _e = window.event || e;//事件对象 var x = _e.clientx - this.offsetleft - tool.offsetwidth / 2 - num;//事件对象在小盒子内的横向偏移量 var y = _e.clienty - this.offsettop - list.offsettop - tool.offsetheight / 2;//竖向偏移量 if (x < 0) { x = 0;//当左偏移出小盒子时,设为0 } if (y < 0) { y = 0;//当上偏移出小盒子时,设为0 } if (x > this.offsetwidth - tool.offsetwidth) { x = this.offsetwidth - tool.offsetwidth;//当右偏移出小盒子时,设为小盒子的宽度-黄色放大区域宽度 } if (y > this.offsetheight - tool.offsetheight) { y = this.offsetheight - tool.offsetheight;//当下偏移出小盒子时,设为小盒子的高度-黄色放大区域高度 } tool.style.left = x + "px";//灰色放大区域距离小盒子左偏距 tool.style.top = y + "px";//灰色放大区域距离小盒子上偏距 bigimg.style.left = (-x + smallimg.offsetleft) * enlarge + "px";//放大图片移动方向相反,偏移距离加倍 bigimg.style.top = (-y + smallimg.offsettop) * enlarge + "px"; } } } </script> </body> </html>
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript图片操作技巧大全》、《javascript切换特效与技巧总结》、《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。