原生js實現簡單的放大鏡效果

megatron 發布于2019-08-30 14:16 / 2541人閱讀

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。

前言：
相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；

（1）首先了解一下放大鏡效果的html架構：如下圖，它由兩部分組成。

html：

第一部分的原理是：設置box的background為需要放大的圖片，同時背景的寬高為100%。再將box的寬高設為300px，這樣背景圖片就可以撐滿box了。然后通過監聽box的mousemove事件，控制紅色小框塊的移動。這個紅色小框塊就是要放大的地方。

第二部分的原理是：設置big里面的img為box的寬度的3倍（這里的3倍就是放大鏡的放大倍數，當然這個值是可以自由選擇的。）。同時big塊的寬高為350px，用來限制img的顯示。然后通過移動img的left，top來達到放大鏡的效果。

  css代碼：
  html,body {
    margin: 0;
    padding:0;
  }
  #box{
    width: 300px;
    height: 300px;
    position: relative;
    background: url(12.png);
    background-size:100% 100%;
  }
  #box #small{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    opacity: 0.6;
  }
  #big{
    width: 350px;
    height: 350px;
    overflow: hidden;
    position: relative;
    display: none;
  }
  #big img{
    width: 900px;  
    height: 900px;  
    position: absolute;
  }

（2）js部分：

var box = document.querySelector("#box");
var small = document.querySelector("#small");
var big = document.querySelector("#big");
var img = document.querySelector("#imgs");
//監聽box的mousemove事件
box.onmousemove = function(e){
  //獲取鼠標的x、y坐標。為什么要減去50呢？為了讓鼠標剛好在small紅色小方塊的中心。
  var top = e.clientY-50;
  var left = e.clientX-50;
  //限制small小方塊移出box的范圍
  if(top > 200){top = 200};
  if(top < 0){top = 0};
  if(left > 200){left = 200};
  if(left < 0){left = 0};
  //動態設置small小方塊的位置，讓小方塊跟隨鼠標移動
  small.style.left = left + "px";
  small.style.top = top + "px";
  //讓big里面的圖片跟隨鼠標的移動而移動。這里為什么要乘以（-3）呢？因為big里面的大圖是box的3倍。鼠標在box上面向右移動1px，那么big里面的大圖就要向左移動(1 x -3)px才能達到我們想要的效果。
  img.style.top = top*(-3) + "px";
  img.style.left = left*(-3) + "px";
}
//監聽box的onmouseenter事件
box.onmouseenter = function(e){
  //當鼠標進入box范圍的時候，顯示放大效果
  big.style.display="block";
}
//監聽box的onmouseleave 事件
box.onmouseleave = function(e){
  //當鼠標移出box范圍的時候，隱藏放大效果
  big.style.display="none";
}

好了，css+js實現放大鏡的功能到這里就完成了。很簡單吧。不過這只是簡單的實現，還有使用canvas實現的方法。

不能只看不動手的喔，自己動手敲一遍，就好理解很多了。

GPU云服務器云服務器原生js實現放大鏡 js實現放大鏡效果 js里面的放大鏡效果實現放大鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115906.html

原生js實現簡單的放大鏡效果

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。前言：相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；（1）首先了解一下放大鏡效果的html架構：如...

lushan 2019-08-02 16:01 評論0 收藏0
原生js實現簡單的放大鏡效果

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。前言：相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；（1）首先了解一下放大鏡效果的html架構：如...

chanjarster 2019-08-22 15:44 評論0 收藏0
原生js實現圖片放大鏡效果

摘要：放大鏡原理放大鏡的實現過程是將一個小圖放置在一個盒子里。右側大圖片盒子出現一個等比例放大的在小圖盒子移動塊中的圖片內容。右側大圖盒子中放置的是一張大的圖片，然后盒子設置成溢出隱藏。放大鏡原理放大鏡的實現過程是將一個小圖放置在一個盒子里。寬高都是100%。當鼠標在小圖盒子里移動時，出現一個移動塊(陰影區域)。右側大圖片盒子出現一個等比例放大的在小圖盒子移動塊中的圖片內容。如圖(請勿...

CoXie 2019-08-20 18:20 評論0 收藏0
仿淘寶的放大鏡效果

摘要：本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜的小功能，實際上原理卻是非常的簡單，下面我們學習一下淘寶放大鏡效果是如何實現的。前言這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閑了一些，就趁這會閑工夫寫一篇文章。本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜...

wuyangnju 2019-08-20 18:14 評論0 收藏0