本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
