原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效

本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡特效展示的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)公司-云計(jì)算及IDC服務(wù)提供商，涵蓋公有云、IDC機(jī)房租用、綿陽服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級(jí)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，歡迎咨詢：18982081108

普及知識(shí)：放大鏡特效涉及到的幾個(gè)值

offsetWidth    獲取元素的寬度
offsetHeight  獲取元素的高度
offsetLeft父元素沒有定位時(shí)，獲取元素距離頁面的左邊距，父元素有定位時(shí)，獲取元素距離父元素的左邊距
offsetTop父元素沒有定位時(shí)，獲取元素距離頁面的上邊距，父元素有定位時(shí)，獲取元素距離父元素的上邊距
scrollTop  內(nèi)容滾動(dòng)的上邊距
scrollLeft 內(nèi)容滾動(dòng)的左邊距
onmousemove  鼠標(biāo)移動(dòng)事件
onmouseover  鼠標(biāo)劃過事件

主要思路：

    1.鼠標(biāo)移動(dòng)，陰影區(qū)跟著移動(dòng)
    2.鼠標(biāo)移動(dòng)，大圖也跟著移動(dòng)
    3.陰影區(qū)域與小圖的比例 以及 大圖顯示區(qū)域與大圖的比例 是一樣的
    4.保證陰影區(qū)域以及大div.big在鼠標(biāo)移動(dòng)到div.small時(shí)顯示

html實(shí)現(xiàn)

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

//定位，大圖顯示區(qū)域和陰影區(qū)域最開始不顯示
#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實(shí)現(xiàn)

1.獲取對(duì)象

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

2.鼠標(biāo)的移入移出事件，當(dāng)鼠標(biāo)移入的時(shí)候，顯示大圖顯示區(qū)以及陰影區(qū)域

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

3.

（1）鼠標(biāo)移動(dòng)，div.shadow跟著移動(dòng)，先獲取到shadow在small內(nèi)的相對(duì)位置，已知鼠標(biāo)點(diǎn)擊位置距離頁面的邊距，fdj距離頁面的邊距，fdj以及shadow的寬高，讓鼠標(biāo)劃過的位置一直位于shadow區(qū)域的中心點(diǎn)，所以可得shadow在small內(nèi)的相對(duì)位置，之后進(jìn)行判斷，讓shadow不能出邊界，最后進(jìn)行賦值操作

（2）shadow區(qū)域移動(dòng)，大圖顯示相應(yīng)的位置，即大圖滾動(dòng)相應(yīng)的距離，大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth，以shadow的左上角為準(zhǔn)，大圖的滾動(dòng)距離為left*相應(yīng)比例

   small.onmousemove = function(ent){
    var e = ent || event;  //獲取鼠標(biāo)事件對(duì)象
    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //獲取shadow在small內(nèi)的相對(duì)位置
    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
    var tw = fdj.offsetWidth - shadow.offsetWidth; //獲取shadow最大可移動(dòng)距離
    var th = fdj.offsetHeight - shadow.offsetHeight; 
    //對(duì)shadow進(jìn)行限制
    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';    
    //大圖跟著移動(dòng)
    var sl = left * big.offsetWidth / shadow.offsetWidth;
    var st = top * big.offsetHeight / shadow.offsetHeight;
    big.scrollTop = st;
    big.scrollLeft = sl; 
  }

4.鼠標(biāo)移出，大圖以及shadow隱藏

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效
當(dāng)前路徑：http://muchs.cn/article18/iehsgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、App設(shè)計(jì)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)