原生js實現圖片放大鏡效果

CoXie 發布于2019-08-20 18:20 / 463人閱讀

摘要：放大鏡原理放大鏡的實現過程是將一個小圖放置在一個盒子里。右側大圖片盒子出現一個等比例放大的在小圖盒子移動塊中的圖片內容。右側大圖盒子中放置的是一張大的圖片，然后盒子設置成溢出隱藏。

放大鏡原理

放大鏡的實現過程是將一個小圖放置在一個盒子里。寬高都是100%。當鼠標在小圖盒子里移動時，出現一個移動塊(陰影區域)。右側大圖片盒子出現一個等比例放大的在小圖盒子移動塊中的圖片內容。如圖(請勿過于認真看圖片，注意圈圈(￢_￢))：

一定要理解上圖中圈起來的陰影塊是箭頭指向的粉紅色圈的等比縮小版。理解了這個在接下來的代碼中，我們才知道怎么去計算右側大圖區域中的left、top值。也可以說成陰影移動塊是模擬右側大圖盒子。右側大圖盒子中放置的是一張大的圖片，然后盒子設置成溢出隱藏。而我們的移動塊也是，不在陰影塊中的內容，你都可以認為是溢出隱藏掉了。

當小圖盒子中的移動塊移動時，根據移動的距離去計算右側大圖盒子中圖片移動的坐標。此時方便理解，你可以想像成陰影塊是靜止的，是陰影塊下面的圖片在移動。所以，我們需要計算出圖片向x軸、y軸移動了多少，根據等比例公式換算出右側大圖盒子中的圖片需要移動的坐標值。

代碼分析

html




    放大鏡

css

移動塊行為分析

當鼠標移動到小圖盒子中時，會出現移動塊（下圖陰影部分）我們需要做的是移動塊位于鼠標的中間，且跟隨鼠標移動。當然了也不能溢出邊界。看圖說話(￢_￢)

再看看代碼：

// 計算move移動塊的left值
var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
// 計算move移動塊的top值
var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;

ok，完美解決 ?（′???）?

計算放大區域圖片left/top值

上面說過了，移動塊模擬的是放大區域。所以此時移動塊與放大區域的盒子，移動塊中的圖片大小與放大區域盒子圖片大小應該是成比例的。

/*
    計算圖片需要移動的坐標
    big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
    big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);
*/

var big_x = move_left/(small.offsetWidth-move.offsetWidth) * (look_girl.offsetWidth-big.offsetWidth);
var big_y = move_top/(small.offsetHeight-move.offsetHeight) * (look_girl.offsetHeight-big.offsetHeight);

此時小圖盒子的寬度（small.offsetWidth）正好是移動塊中圖片的寬度（認為不在移動塊中顯式的圖片都溢出隱藏了）。然后就好像沒有什么要解釋的了...

云服務器 GPU云服務器原生js實現放大鏡 js實現放大鏡效果圖片放大縮小效果js js圖片變焦放大效果

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

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

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

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

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

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

megatron 2019-08-30 14:16 評論0 收藏0
原生js實現簡單的放大鏡效果

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

chanjarster 2019-08-22 15:44 評論0 收藏0
仿淘寶的放大鏡效果

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

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