插件：商品放大鏡

Bamboy 發(fā)布于2019-08-22 13:47 / 2576人閱讀

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

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

前言

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

　寫之前先復(fù)習(xí)一下：（如圖）

記住上面的圖
上碼

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;
}

是不是很簡(jiǎn)單，我當(dāng)時(shí)在避免.module溢出的時(shí)候費(fèi)了些時(shí)間，

當(dāng)時(shí)我很蠢多帶帶把每個(gè)方向都拿出來并且在每個(gè)方向下面設(shè)置.module的left和top；導(dǎo)致鼠標(biāo)在移動(dòng)的時(shí)候代碼判斷使移動(dòng)發(fā)生了沖突，并未達(dá)到我想要的效果。
　　想想雖然要每個(gè)方向都要考慮，但是沒必要每判斷一次給就給.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");