插件：商品放大鏡

Bamboy 發布于2019-08-22 13:47 / 2567人閱讀

摘要：看之后搜有助于理解前言這段代碼我哩哩啦啦寫了三天多，平時都有活今天忙里偷閑想起之前放大鏡這個功能寫了一半我是分兩塊寫的，先是讓就是那個遮罩層能自由的在圖片上跟隨鼠標走，剩下的就簡單了遮罩層的乘以一個固定系數就是放大圖片的。

看之后搜：http://www.cnblogs.com/yzb23/... 有助于理解 - -

前言

這段代碼我哩哩啦啦寫了三天多，平時都有活今天忙里偷閑想起之前放大鏡這個功能寫了一半（我是分兩塊寫的，
先是讓module就是那個遮罩層能自由的在圖片上跟隨鼠標走，剩下的就簡單了,遮罩層的left、top乘以一個固定系數就是‘放大圖片’的left、top）。好了我的思路就是：只需要一張圖片，這張圖片像素要大一點，先以縮小的方式展示，然后鼠標移上去之后，在右側有一個div，里面也放著一個src相同的img，只不過這個img不再是縮小的了。ok 這樣就夠了！

　寫之前先復習一下：（如圖）

記住上面的圖
上碼

HTML

css

div.content{
    overflow: hidden;
    position: relative;
}
img.small{
    float: left;
    border:1px solid blue;
}
div.large{
    float: left;
    width:300px;
    height:300px;
    overflow: hidden;
    position: relative;/**/
}
div.large>img{
    width:600px;
    display: none;
    position:absolute;/**/
}
div.module{
    width:150px;
    height:150px;
    background-color: rgba(255,255,255,.3);
    border:1px solid #666666;
    position:absolute ;
    top:0;
    left:0;
    display: none;
}
div.module:hover{
    cursor: move;
}

是不是很簡單，我當時在避免.module溢出的時候費了些時間，

當時我很蠢多帶帶把每個方向都拿出來并且在每個方向下面設置.module的left和top；導致鼠標在移動的時候代碼判斷使移動發生了沖突，并未達到我想要的效果。
　　想想雖然要每個方向都要考慮，但是沒必要每判斷一次給就給.module賦一次值。
　　把left和top多帶帶拿出來考慮，最后在把left、top賦值給.module 如下，更好。

//                防止溢出
var L = (left<0)?0:(left>$(".small").width()-$(".module").width())?$(".small").width()-$(".module").width():left;
var T = (top<0)?0:(top>$(".small").height()-$(".module").height())?$(".small").height()-$(".module").height():top;
           $("div.module").css("display","block").css("left",L+"px").css("top",T+"px");

GPU云服務器云服務器 js放大鏡插件三個圖 html圖片放大插件 js插件圖片放大放大鏡

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

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

[vue插件]基于vue2.x的電商圖片放大鏡插件

摘要：基于的電商圖片放大鏡插件動畫截圖使用步驟安裝使用配置圖片地址大圖地址圖片放大倍數放大時頁面是否可滾動注意事項組件默認是的高寬，所以建議將組件包含在一個有固定高寬的容器內。最近在擼一個電商網站，有一個需求是要像淘寶商品詳情頁那樣，鼠標放在主圖上，顯示圖片放大鏡效果，找了一下貌似沒有什么合適的vue插件，于是自己擼了一個，分享一下。小白第一次分享，各位大神莫見笑。 vue-piczoom...

617035918 2019-08-22 13:55 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

ThreeWords 2019-08-20 18:01 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

szysky 2019-08-29 12:56 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

weknow619 2019-08-01 17:09 評論0 收藏0
微信小程序之--（與唯品會來場粉紅色的邂逅 ???）

摘要：微信小程序之與唯品會來場粉紅色的邂逅買買買，雖然雙十二剛過，可是唯品會的折扣卻是依然火爆。一打開頁面，便是粉色的主頁映入眼簾，琳瑯滿目的商品，讓我這個月光族過了把眼癮。 Welcome to miaomiaoXiongs segmentfault 微信小程序之--（與唯品會來場粉紅色的邂逅 ???）買買買，雖然雙十二剛過，可是唯品會的折扣卻是依然火爆。一打開頁面，便是粉色的主頁映入...

SnaiLiu 2019-08-01 18:15 評論0 收藏0