成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生js實(shí)現(xiàn)圖片放大鏡效果

CoXie / 486人閱讀

摘要：放大鏡原理放大鏡的實(shí)現(xiàn)過程是將一個(gè)小圖放置在一個(gè)盒子里。右側(cè)大圖片盒子出現(xiàn)一個(gè)等比例放大的在小圖盒子移動(dòng)塊中的圖片內(nèi)容。右側(cè)大圖盒子中放置的是一張大的圖片，然后盒子設(shè)置成溢出隱藏。

放大鏡原理

放大鏡的實(shí)現(xiàn)過程是將一個(gè)小圖放置在一個(gè)盒子里。寬高都是100%。當(dāng)鼠標(biāo)在小圖盒子里移動(dòng)時(shí)，出現(xiàn)一個(gè)移動(dòng)塊(陰影區(qū)域)。右側(cè)大圖片盒子出現(xiàn)一個(gè)等比例放大的在小圖盒子移動(dòng)塊中的圖片內(nèi)容。如圖(請(qǐng)勿過于認(rèn)真看圖片，注意圈圈(￢_￢))：

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

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

代碼分析 
html



    放大鏡
    


    

        
        

    

    

        
    




css


js
移動(dòng)塊行為分析

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

再看看代碼：

// 計(jì)算move移動(dòng)塊的left值
var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
// 計(jì)算move移動(dòng)塊的top值
var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;

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

計(jì)算放大區(qū)域圖片left/top值

上面說過了，移動(dòng)塊模擬的是放大區(qū)域。所以此時(shí)移動(dòng)塊與放大區(qū)域的盒子，移動(dòng)塊中的圖片大小與放大區(qū)域盒子圖片大小應(yīng)該是成比例的。

/*
    計(jì)算圖片需要移動(dòng)的坐標(biāo)
    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);

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84377.html

相關(guān)文章

  • 原生js實(shí)現(xiàn)簡單的放大鏡效果

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

    lushan 評(píng)論0 收藏0

  • 原生js實(shí)現(xiàn)簡單的放大鏡效果

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

    megatron 評(píng)論0 收藏0

  • 原生js實(shí)現(xiàn)簡單的放大鏡效果

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

    chanjarster 評(píng)論0 收藏0

  • 仿淘寶的放大鏡效果

    摘要：本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺很復(fù)雜的小功能，實(shí)際上原理卻是非常的簡單，下面我們學(xué)習(xí)一下淘寶放大鏡效果是如何實(shí)現(xiàn)的。 前言 這一段時(shí)間事情挺多的，一直沒有時(shí)間寫文章。這兩天稍微閑了一些，就趁這會(huì)閑工夫?qū)懸黄恼?。本次文章的主要?nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺很復(fù)雜...

    wuyangnju 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

CoXie

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<