使用js實現(xiàn)詳情頁放大鏡效果

<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>  

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

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