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

1.html

<div id="small">
    <div id="mo">  
    </div>
    <img src="img/timg.jpg"/>
    <div id = "frame">  
    </div>  
  </div>
  <div id = "big">
    <img src="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 = true
        if(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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。