原生js簡單實現放大鏡特效，js放大鏡特效

原生js簡單實現放大鏡特效，js放大鏡特效

本文執行個體為大家分享了js實現放大鏡特效展示的具體代碼，供大家參考，具體內容如下

普及知識：放大鏡特效涉及到的幾個值

offsetWidth    擷取元素的寬度
offsetHeight  擷取元素的高度
offsetLeft父元素沒有定位時，擷取元素距離頁面的左邊距，父元素有定位時，擷取元素距離父元素的左邊距
offsetTop父元素沒有定位時，擷取元素距離頁面的上邊距，父元素有定位時，擷取元素距離父元素的上邊距
scrollTop  內容滾動的上邊距
scrollLeft 內容滾動的左邊距
onmousemove  滑鼠移動事件
onmouseover  滑鼠划過事件

主要思路：

    1.滑鼠移動，陰影區跟著移動
    2.滑鼠移動，大圖也跟著移動
    3.陰影地區與小圖的比例 以及 大圖顯示地區與大圖的比例 是一樣的
    4.保證陰影地區以及大div.big在滑鼠移動到div.small時顯示

html實現

<div id="fangdajing">    <div class="small">      <img src="small.jpg" alt="">      <div class="shadow"></div>    </div>    <div class="big">      <img src="big.jpg" alt="">    </div>  </div>

css樣式

//定位，大圖顯示地區和陰影地區最開始不顯示#fangdajing{      width:450px;      height:450px;      position:relative;    }    .small{      width:450px;      height:450px;      position:absolute;      left:0px;      top:0px;    }    .shadow{      width:200px;      height:200px;      background:yellow;      opacity:0.3;      position:absolute;      top:0;      left:0;      display:none;    }    .big{      position:absolute;      left:450px;      width:356px;      height:356px;      overflow:hidden;      display:none;    }

js實現

1.擷取對象

var fdj = document.getElementById('fangdajing');var big = document.getElementsByClassName('big')[0];var small = document.getElementsByClassName('small')[0];var shadow = document.getElementsByClassName('shadow')[0];

2.滑鼠的移入移出事件，當滑鼠移入的時候，顯示大圖顯示區以及陰影地區

  small.onmouseover = function(){        big.style.display = 'block';        shadow.style.display = 'block';  }

3.

（1）滑鼠移動，div.shadow跟著移動，先擷取到shadow在small內的相對位置，已知滑鼠點擊位置距離頁面的邊距，fdj距離頁面的邊距，fdj以及shadow的寬高，讓滑鼠划過的位置一直位於shadow地區的中心點，所以可得shadow在small內的相對位置，之後進行判斷，讓shadow不能出邊界，最後進行賦值操作

（2）shadow地區移動，大圖顯示相應的位置，即大圖滾動相應的距離，大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth，以shadow的左上方為準，大圖的滾動距離為left*相應比例

   small.onmousemove = function(ent){    var e = ent || event;  //擷取滑鼠事件對象    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //擷取shadow在small內的相對位置    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;    var tw = fdj.offsetWidth - shadow.offsetWidth; //擷取shadow最大可移動距離    var th = fdj.offsetHeight - shadow.offsetHeight;     //對shadow進行限制    if(left < 0){      left = 0;          }else if(left > tw){      left = tw;    }     if(top < 0){      top = 0;          }else if(top > th){      top = th;    }     //賦值    small.style.left = left + 'px';    small.style.top = top + 'px';        //大圖跟著移動    var sl = left * big.offsetWidth / shadow.offsetWidth;    var st = top * big.offsetHeight / shadow.offsetHeight;    big.scrollTop = st;    big.scrollLeft = sl;   }

4.滑鼠移出，大圖以及shadow隱藏

  small.onmouserout = function(){    big.style.display = 'none';    shadow.style.display = 'none';      }

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