喜歡購物的童鞋會(huì)發(fā)現(xiàn)合愈，PC端的電商詳情頁總喜歡用一個(gè)放大鏡的效果來實(shí)現(xiàn)顧客查看圖片的細(xì)節(jié)炸客，貌似很好玩绒北，業(yè)余時(shí)間來給大家科普實(shí)現(xiàn)的方法适贸，當(dāng)然是怎么簡單怎么來灸芳，適合初出茅廬的童鞋涝桅，大神們也歡迎來點(diǎn)評(píng)下。
1.實(shí)現(xiàn)原理
1.原理圖
圖里面的節(jié)點(diǎn)關(guān)系看下邊頁面結(jié)構(gòu)層（html文件）
js實(shí)現(xiàn)原理：
1.首先鼠標(biāo)移入容器".wrap"或者".show"時(shí)烙样，顯示".show span"和".show-ks",當(dāng)然冯遂，進(jìn)入頁面的時(shí)候他們要默認(rèn)隱藏（display：none）；當(dāng)鼠標(biāo)移出的時(shí)候還要再次隱藏他們
2.然后就是鼠標(biāo)在容器".wrap"內(nèi)移動(dòng)的時(shí)候谒获，要讓小容器".show span"跟隨鼠標(biāo)移動(dòng)蛤肌，使鼠標(biāo)一直在小容器".show span"正中間
3.相對(duì)位移問題杠纵，鼠標(biāo)在容器".wrap"中移動(dòng)的時(shí)候颅筋，右邊容器".show-ks"的圖片要顯示".show span"范圍的圖片內(nèi)容，這樣就有了放大的效果。
單拿上邊距（top,offsetTop）來說明一下比例問題：
var wrap = document.querySelector('.wrap');
var show = wrap.querySelector('.show');
var showSpan = show.querySelector('span');
var showKs = wrap.querySelector('.show-ks');
var showBig = showKs.querySelector('span');
showspan的上邊距就是
var Top = Y-showSpan.offsetHeight/2;
假設(shè)showBig的上邊距應(yīng)該是Top2精耐，那么比例式子就是：
Top/(wrap.offsetHeight-showSpan.offsetHeight)=Top2/(showBig.offsetHeight-showKs.offsetHeight)
左邊距的entity就和上邊距的問題一樣，迎刃而解
2.代碼
1.結(jié)構(gòu)層（html）
<div class="wrap">
<div class="show">
[站外圖片上傳中……(2)]
<span>
</span>
</div>
<div class="show-ks">
<span>
</span>
</div>
</div>
2.表現(xiàn)層（css）
*{
padding:0;
margin:0;
}
.wrap{
width:418px;
height:418px;
background: red;
position:relative;
margin:50px;
cursor: move;
}
.show{
width:418px;
height:418px;
background: orange;
position: relative;
}
.show img{
width:100%;
}
.show span{
display:none;
width:218px;
height:218px;
background: rgba(108,158,248,0.5);
position: absolute;
top:0;
left:0;
}
.show-ks{
display:none;
width:418px;
height:418px;
background: blue;
position: absolute;
top:0;
left:428px;
overflow: hidden;
}
.show-ks span{
display:block;
width:800px;
height:800px;
background: url(./img/img1.jpg);
position: absolute;
top:0;
left:0;
}
3.行為層（js）
window.onload=function(){
//獲取所需要的事件源
var wrap = document.querySelector('.wrap');
var show = wrap.querySelector('.show');
var showSpan = show.querySelector('span');
var showKs = wrap.querySelector('.show-ks');
var showBig = showKs.querySelector('span');
// 添加/監(jiān)控鼠標(biāo)移入事件
show.addEventListener('mouseover',function(){
showSpan.style.display = 'block';
showKs.style.display = 'block';
//監(jiān)聽鼠標(biāo)移動(dòng)事件
wrap.addEventListener('mousemove',function(e){
//處理兼容性
var e = window.e||e;
//實(shí)時(shí)的獲取鼠標(biāo)相對(duì)于wrap容器的橫縱坐標(biāo)(X,Y)
var X = e.clientX-this.offsetLeft;
var Y = e.clientY-this.offsetTop;
//通過鼠標(biāo)橫縱坐標(biāo)(X,Y)琅锻，減去showspan寬度/高度的一半卦停，使得鼠標(biāo)一直在showspan的正中間
var Left = X-showSpan.offsetWidth/2;
var Top = Y-showSpan.offsetHeight/2;
//防止showspan1跑出show容器外，判斷Left和Top值恼蓬，
if(Left < 0){
Left = 0;
}else if(Left > this.offsetWidth-showSpan.offsetWidth){
Left = this.offsetWidth-showSpan.offsetWidth;
}
if(Top < 0){
Top = 0;
}else if(Top > this.offsetHeight-showSpan.offsetHeight){
Top = this.offsetHeight-showSpan.offsetHeight;
}
showSpan.style.left = Left+'px';
showSpan.style.top = Top+'px';
//對(duì)應(yīng)大圖的偏移量
//根據(jù)原理中的比例等式惊完，獲取并設(shè)置大圖應(yīng)有的相對(duì)偏移量
var bigTop = Top/(this.offsetHeight-showSpan.offsetHeight)*(showBig.offsetHeight-showKs.offsetHeight);
var bigLeft = Left/(this.offsetWidth-showSpan.offsetWidth)*(showBig.offsetWidth-showKs.offsetWidth);
showBig.style.top = -bigTop+'px';
showBig.style.left = -bigLeft+'px';
})
});
//添加鼠標(biāo)移出事件
show.addEventListener('mouseout',function(){
showSpan.style.display = 'none';
showKs.style.display = 'none';
});
}
3.注意
可能有童鞋疑惑為什么不直接用pageX和PageY，恩处硬，感興趣可以自己試一試小槐，博主試了試有點(diǎn)問題，所以委曲求全荷辕。
哪里不對(duì)的凿跳，希望過路的大神不吝賜教。
