本文實例為大家分享了js實現詳情頁放大鏡的具體代碼，供大家參考，具體內容如下

1.html

<div id='small'> <div id='mo'> </div> <img src='http://www.cgvv.com.cn/bcjs/img/timg.jpg'/> <div id = 'frame'> </div> </div> <div id = 'big'> <img src='http://www.cgvv.com.cn/bcjs/img/timg.jpg'/></div>

2.css

<style> *{margin:0;padding:0; } #small{width:400px;height:400px;position:relative;box-shadow: 0 0 5px #000; } #small img{/* 圖片百分百,完全覆蓋原始框 */width:100%;height:100%; } #frame{width:100px;height:100px;position:absolute;box-shadow:0 0 5px #000;top:0;left:0;/* 在鼠標移入原始框的時候才顯現,所以初始值為隱藏 */display: none;/* 在放大鏡中插入背景圖,根據背景圖定位,改變放大鏡中和原始框中的圖片一一對應 *//* 0 0 即為background-position的值 */background: url(img/timg.jpg) no-repeat 0 0;/* CSS2中的內容要和CSS3中的分開 */background-size: 400px 400px ; } #big{width:400px;height:400px;position:relative;box-shadow: 0 0 5px #000;/* 因為放大框中的內容與放大鏡是16：1放大的,所以原始框與放大框相同大小的情況下使用overflow: hidden;用放大框截取插入圖片的大小 */overflow: hidden;/* 在鼠標移入原始框的時候才顯現,所以初始值為隱藏 */display: none; } #big img{width:1600px;height:1600px;position: absolute;left: 0;top:0; } #big,#small{margin-left: 100px;float: left; } #mo{/* 最上邊的一層膜寬高100%,層級在最上層,完全覆蓋住原始框，確保鼠標在原始框上移動時,放大鏡能跟著穩定的移動，即鼠標移動的參照物唯一 */width:100%;height:100%;z-index: 999;position: absolute; }</style>

3.js

<script> //獲取原始框 var oSmall = document.getElementById('small'); //獲取放大框 var oBig = document.getElementById('big'); //獲取放大鏡 var oFrame = document.getElementById('frame'); //獲取放大框中的圖片 var oBig_img = oBig.children[0] //獲取原始框中的圖片 var oSmall_img = oSmall.children[1]; //鼠標移入事件(注：沒有兼容問題) //放大鏡和放大框顯現出來 oSmall.onmouseenter = function(){ oBig.style.display = 'block'; oFrame.style.display = 'block'; //鼠標移入圖片變模糊 oSmall_img.style.opacity = '0.3'; } //鼠標移出事件(注：沒有兼容問題) //放大鏡和放大框變回原始的隱藏狀態 oSmall.onmouseleave = function(){ oBig.style.display = 'none'; oFrame.style.display = 'none'; //鼠標移出,圖片變清晰 oSmall_img.style.opacity = '1' } //鼠標移動事件(注：有兼容問題) oSmall.onmousemove = function(event){ //解決兼容問題 var e = event || window.event; //獲取鼠標在放大鏡中心的位置坐標(用于判斷放大鏡不會移出原始框) //獲取位置用offsetX/offsetY //size初始值為100,與放大鏡未放大之前一致, //size/2是為了獲取鼠標在放大鏡的中心點 //用size而不是定值,是為了后邊放大鏡隨鼠標滾輪滾動放大縮小時 //鼠標能一直在放大鏡中心位置 //e.offsetY/e.offsetX是鼠標到原始框邊框的距離 //size / 2是鼠標到放大鏡邊框的距離 //nTop/nLeft是放大鏡邊框到原始框邊框的距離 var nTop = e.offsetY - size / 2; var nLeft = e.offsetX - size / 2; //判斷放大鏡的臨界值 //不小于最小值,不大于最大值 //判斷放大鏡的最小值 if(nTop <= 0){ //差一點就等于零的時候,也賦值為零 nTop = 0; } if(nLeft <= 0){ nLeft = 0; } //判斷放大鏡的最大值 //因為坐標只有offsetLeft 和 offsetTop兩個,所以計算最大值時: //需要獲取放大鏡的左和上的邊框到原始框的左和上的邊框的最大距離與原始框的坐標位置進行比較 //offsetHeight/offsetWidth獲取元素的寬高 //原始框的寬高 - 放大框的寬高 == 放大鏡可以移動的最大值 var maxTop = oSmall.offsetHeight - oFrame.offsetHeight; var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth; //放大鏡的邊框大于等于最大值,停 if(nTop >= maxTop){ nTop = maxTop; } if(nLeft >= maxLeft){ nLeft = maxLeft; } //放大鏡的位置坐標 oFrame.style.top = nTop + 'px' oFrame.style.left = nLeft + 'px' //計算放大鏡和放大框之間的縮放比例 //計算比例用offsetWidth/offsetHeight var propX = oBig.offsetWidth/oFrame.offsetWidth; var propY = oBig.offsetHeight/oFrame.offsetHeight; //-nTop/-nLeft用負值,使放大框中的內容與放大鏡所停的位置一致(圖片內容移動方向相同) //如果是正值,放大鏡移動時與放大框中的內容相反移動(放大框中不會出現對應的放大圖片) oBig_img.style.top = -nTop*propY + 'px' oBig_img.style.left = -nLeft*propX + 'px' //鼠標移入時,放大鏡清晰,原始框模糊 //利用改變插入到放大鏡中的背景圖的position,進行圖片的一一對應 //注意:``里的${}和${}中間用空格隔開 oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`; } //鼠標滾輪事件 //注意:兼容問題 //設置size初始值為100,即放大鏡未放大縮小時的原始狀態 //通過判斷滾輪的上下滾動方向,改變放大鏡的大小,即寬高同時增大或縮小 var size = 100; //解決兼容問題 //FF（火狐) if(document.addEventListener){ //第一個參數是事件名稱, //第二個參數是事件處理函數, //第三個參數是一個被廢棄的參數,是以事件捕獲的形式,還是事件冒泡的形式觸發事件,默認false //第三個參數基本用不到document.addEventListener(’DOMMouseScroll’,handleEvent,false); } //IE/Opera（歐鵬）/Chrome(谷歌) window.onmousewheel = document.onmousewheel = handleEvent; // 分辨滾輪向上還是向下; function handleEvent(event){var e = event || window.event;// FF => detail 向上 是 負數 ;// 向下 是 正數;// Chrome => deltaY 向上 是 負數;// 向下 是 正數;var flag = trueif(e.detail != 0 ){ // 說明瀏覽器是火狐; if(e.detail > 0){flag = false// 向下; }else{flag = true;// 向上; }}else{ //說明瀏覽器是IE/Opera/Chrome if(e.deltaY > 0){flag = false// 向下; }else{flag = true;// 向上; }}//滾輪向上時,放大鏡變大，放大框中的內容縮小;//滾輪向下時,放大鏡縮小,放大框中的內容變大;if(flag){ // 向上 size ++;}else{ size --;// 向下}//將size值賦給放大鏡oFrame.style.width = size + 'px';oFrame.style.height = size + 'px';//當鼠標放在原始框上一動不動時,放大鏡也不會再增大了oSmall.onmousemove(e);//放大縮小后放大鏡和放大框的比例發生了變化,導致放大框中的內容與放大鏡所在位置不符// 根據放大鏡的縮放,重新計算放大框與放大鏡之間的縮放比例var prop = 400 / size;// 根據比例縮放放大框中的圖片 ;oBig_img.style.width = 400 * prop + 'px';oBig_img.style.height = 400 * prop + 'px'; }</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。