JavaScript實(shí)現(xiàn)多張圖片放大鏡效果示例【不限定圖片尺寸,rem單位】
本文實(shí)例講述了JavaScript實(shí)現(xiàn)多張圖片放大鏡效果。分享給大家供大家參考,具體如下:
效果如下:可以展示圖片列表的放大鏡效果,圖片尺寸沒(méi)有要求會(huì)自動(dòng)調(diào)整至水平垂直居中效果
代碼如下,除了圖片要替換一下,其它的可直接運(yùn)行查看效果,enlarge是圖片要放大查看的倍數(shù),注意:.bigBox的寬高與.tool的寬高比值要與enlarge保持一致,比如本例中這個(gè)比值是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];//小盒子中的灰色區(qū)域 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)) {//當(dāng)展示的圖片尺寸并不統(tǒng)一時(shí),根據(jù)圖片長(zhǎng)寬比例確定圖片以高度還是寬度為準(zhǔn)進(jìn)行縮放展示 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"; }; //鼠標(biāo)離開(kāi)小盒子區(qū)域,不顯示黃色區(qū)域和大盒子 smallBox.onmouseleave = function () { tool.className = "tool"; bigBox.className = "big-box"; }; //鼠標(biāo)在小盒子內(nèi)移動(dòng) smallBox.onmousemove = function (e) { var _e = window.event || e;//事件對(duì)象 var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2 - num;//事件對(duì)象在小盒子內(nèi)的橫向偏移量 var y = _e.clientY - this.offsetTop - list.offsetTop - tool.offsetHeight / 2;//豎向偏移量 if (x < 0) { x = 0;//當(dāng)左偏移出小盒子時(shí),設(shè)為0 } if (y < 0) { y = 0;//當(dāng)上偏移出小盒子時(shí),設(shè)為0 } if (x > this.offsetWidth - tool.offsetWidth) { x = this.offsetWidth - tool.offsetWidth;//當(dāng)右偏移出小盒子時(shí),設(shè)為小盒子的寬度-黃色放大區(qū)域?qū)挾? } if (y > this.offsetHeight - tool.offsetHeight) { y = this.offsetHeight - tool.offsetHeight;//當(dāng)下偏移出小盒子時(shí),設(shè)為小盒子的高度-黃色放大區(qū)域高度 } tool.style.left = x + "px";//灰色放大區(qū)域距離小盒子左偏距 tool.style.top = y + "px";//灰色放大區(qū)域距離小盒子上偏距 bigImg.style.left = (-x + smallImg.offsetLeft) * enlarge + "px";//放大圖片移動(dòng)方向相反,偏移距離加倍 bigImg.style.top = (-y + smallImg.offsetTop) * enlarge + "px"; } } } </script> </body> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript實(shí)現(xiàn)商品圖片放大鏡
- js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
- JavaScript實(shí)現(xiàn)圖片放大鏡效果
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- js實(shí)現(xiàn)圖片局部放大效果詳解
- js實(shí)現(xiàn)圖片放大并跟隨鼠標(biāo)移動(dòng)特效
- JS滾輪控制圖片縮放大小和拖動(dòng)的實(shí)例代碼
- JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
- JS實(shí)現(xiàn)圖片放大鏡插件詳解
- js實(shí)現(xiàn)圖片放大展示效果
- hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
- JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果
相關(guān)文章
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽(tīng)詳解
uniapp是一個(gè)支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽(tīng)的相關(guān)資料,需要的朋友可以參考下2022-04-04使用JavaScriptCore實(shí)現(xiàn)OC和JS交互詳解
JavaScriptCore是webkit的一個(gè)重要組成部分,主要是對(duì)JS進(jìn)行解析和提供執(zhí)行環(huán)境。下面這篇文章主要給大家介紹了使用JavaScriptCore實(shí)現(xiàn)OC和JS交互的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí),下面來(lái)一起看看吧。2017-03-03javascript實(shí)現(xiàn)類似于新浪微博搜索框彈出效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)類似于新浪微博搜索框彈出效果的方法,涉及javascript彈出搜索框的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript this調(diào)用規(guī)則說(shuō)明
我希望通過(guò)這些來(lái)使你們理解各種函數(shù)調(diào)用方式的不同,讓你的JavaScript代碼遠(yuǎn)離bugs。2010-03-03webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))
本篇文章主要介紹了webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11JavaScript計(jì)算字符串中每個(gè)字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計(jì)算字符串中每個(gè)字符出現(xiàn)的次數(shù),有需要的朋友可以參考一下2013-07-07bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法
這篇文章主要介紹了bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法,需要的朋友可以參考下2017-11-11