原生js實(shí)現(xiàn)放大鏡的示例分析

發(fā)布時(shí)間：2021-06-18 14:49:01 來(lái)源：億速云閱讀：107 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹原生js實(shí)現(xiàn)放大鏡的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

原理：左邊陰影在左邊圖片上從左到右移動(dòng)的時(shí)候，右邊大框也在右邊大圖片上從左到右移動(dòng)（盡管在視覺(jué)、原理和代碼上是相反的）；所謂放大，其實(shí)就是一張?jiān)揪秃苄〉膱D對(duì)應(yīng)一張?jiān)揪秃艽蟮膱D。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .small{
      width: 400px;
      height: 400px;
      position: relative;
      background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
      border: 1px solid #ccc;
    }
    .small .inner{
      width: 100px;
      height: 100px;
      background: yellow;
      opacity: 0.5;
      filter: alpha(opacity=50);
      position: absolute;
      left:0;
      top:0;
      display: none;
    }
    .big{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0;
      overflow: hidden;
      border: 1px solid #ccc;
      display: none;
    }
    .big img{
      width: 200%;
      height: 200%;
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>
<div id="small" class="small">
  <div class="inner"></div>
</div>
<div id="big" class="big">
  <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
  var small=document.getElementById('small');
  var inner=small.getElementsByTagName('div')[0];
  var big=document.getElementById('big');
  var img=big.getElementsByTagName('img')[0];
  //當(dāng)鼠標(biāo)移入small的時(shí)候，inner和big顯示
  small.onmouseover=function(){
    big.style.display='block';
    inner.style.display='block';
  };
  //當(dāng)鼠標(biāo)在small移動(dòng)的時(shí)候：1）鼠標(biāo)在inner的中間 2）inner跟隨鼠標(biāo)移動(dòng)
  small.onmousemove=function(e){
    e=e||window.event;
    var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
    var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
    if(left<=0){
      left=0;
    }else if(left>=this.offsetWidth-inner.offsetWidth){
      left=this.offsetWidth-inner.offsetWidth
    }
    if(top<=0){
      top=0;
    }else if(top>=this.offsetHeight-inner.offsetHeight){
      top=this.offsetHeight-inner.offsetHeight
    }
    inner.style.left= left+'px';
    inner.style.top= top+'px';
    //當(dāng)inner移動(dòng)的時(shí)候，大圖跟著一起移動(dòng)，并且，大圖和inner移動(dòng)的方向相反；
    //或者理解為：左邊陰影在圖片上從左到右移動(dòng)的時(shí)候，右邊大框也在大圖片上從左到右移動(dòng)（盡管視覺(jué)上是相反的）。
    img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
    img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
  };
  //當(dāng)鼠標(biāo)移出的時(shí)候，inner和big隱藏；
  small.onmouseout=function(){
    big.style.display='none';
    inner.style.display='none';
  }
</script>
</body>
</html>

以上是“原生js實(shí)現(xiàn)放大鏡的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

原生js實(shí)現(xiàn)放大鏡的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽