JS實現(xiàn)京東放大鏡效果

第JS實現(xiàn)京東放大鏡效果本文實例為大家分享了JS實現(xiàn)京東放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

需要實現(xiàn)的效果圖如下：

①布局：布局采用一個大盒子里面首先分為上下兩個部分，然后下部分又分為左右兩個部分。左邊的盒子里面放了一個img和一個遮罩層cover，右邊盒子里面放的是800*800的大圖片，這里提供左邊的圖片b3.png和右邊的大圖片big.jpg:

注意：左邊盒子里面的cover采用絕對定位，右邊盒子里面的img采用絕對定位。

②功能實現(xiàn)：主要有三個功能模塊：

1.鼠標(biāo)經(jīng)過（mouseover）左邊盒子，黃色的遮罩層以及右邊盒子顯示，鼠標(biāo)離開（mouseout）則隱藏黃色遮罩層以及右邊盒子。

2.黃色遮罩層跟隨鼠標(biāo)移動（mousemove）。鼠標(biāo)在盒子的坐標(biāo)=鼠標(biāo)在頁面的坐標(biāo)-左邊盒子在頁面的坐標(biāo)，但是又因為鼠標(biāo)是在遮罩層的中間，所以最終的坐標(biāo)要減去遮罩層一半的高度和寬度。注意這里有邊界條件：就是黃色遮罩層的移動距離，黃色遮罩層的x方向的移動距離不能小于0且不能大于左邊盒子寬度減去遮罩層的寬度。

3.移動黃色遮罩層，大圖片跟隨移動功能。大圖片移動的距離根據(jù)下面這個公式來進(jìn)行計算：

遮擋層的移動距離上一點已經(jīng)算過了，遮罩層的最大移動距離上面也說了，剩下的就是大圖片最大移動距離，大圖片最大移動距離=圖片的大小-右邊盒子的大小。

最后全部代碼如下：

html代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

title京東放大鏡效果/title

scriptsrc="../js/index.js"/script

style

*{

margin:0;

padding:0;

}

ulli{

list-style:none;

}

/*外面大盒子*/

.container{

box-sizing:border-box;

width:1200px;

height:500px;

/*background-color:pink;*/

margin:200pxauto;

}

.container.topbox{

width:100%;

height:60px;

/*background-color:violet;*/

border-bottom:2pxsolid#bc2815;

}

.container.topboxul{

margin-left:10px;

}

.container.topboxulli{

float:left;

font-size:22px;

color:#4e535b;

padding:15px20px;

}

.container.topboxulli:hover{

color:white;

background-color:#bc2815;

}

.container.topboxulli:first-child{

color:white;

background-color:#bc2815;

}

.container.bottombox.leftbox{

float:left;

height:400px;

width:400px;

/*background-color:violet;*/

margin-top:10px;

}

.container.bottombox.leftboxul{

overflow:hidden;

margin-left:10px;

}

.container.bottombox.leftboxulli{

float:left;

font-size:14px;

color:#4e535b;

}

.container.bottombox.leftbox.leftphone{

position:relative;

overflow:hidden;

width:400px;

height:400px;

/*background-color:pink;*/

margin-top:5px;

margin-left:10px;

border:1pxsolid#c8cbc8;

}

.leftbox.leftphoneimg{

width:100%;

height:100%;

}

.container.bottombox.leftbox.leftphone.cover{

position:absolute;

display:none;

top:0;

left:0;

width:220px;

height:220px;

background-color:#ffeba2;

opacity:0.5;

border:1pxsolid#ccc;

cursor:move;

}

.container.bottombox.rightbox{

float:left;

margin-top:10px;

width:420px;

height:420px;

margin-left:20px;

/*background-color:violet;*/

}

.container.bottombox.rightbox{

position:relative;

display:none;

border:1pxsolid#ccc;

overflow:hidden;

}

.container.bottombox.rightboximg{

position:absolute;

top:0;

left:0;

}

/style

/head

body

div

div

ul

li全部商品分類/li

li服裝城/li

li美妝館/li

li傳智超市/li

li全球購/li

li閃購/li

li團(tuán)購/li

li拍賣/li

li有趣/li

/ul

/div

div

div

div

ul

li手機(jī)、數(shù)碼、通訊nbsp;nbsp;/li

li手機(jī)nbsp;nbsp;/li

liApple蘋果nbsp;nbsp;/li

liiphone6SPlus系統(tǒng)nbsp;nbsp;/li

/ul

div

imgsrc="../b3.png"alt=""

div/div

/div

/div

/div

div

imgsrc="../big.jpg"alt=""

/div

/div

/div

/body

/html

外部js文件：

window.addEventListener('load',function(){

//獲取元素

varcover=this.document.querySelector('.cover');

varleftphone=this.document.querySelector('.leftphone');

varrightbox=this.document.querySelector('.rightbox');

varbig=this.document.querySelector('.big');

//鼠標(biāo)移動到左邊的手機(jī)上的時候遮罩層和右邊的手機(jī)顯示出來

leftphone.addEventListener('mouseover',function(){

cover.style.display='block'

rightbox.style.display='block'

})

//鼠標(biāo)移離開到左邊的手機(jī)上的時候遮罩層和右邊的手機(jī)隱藏

leftphone.addEventListener('mouseout',function(){

cover.style.display='none'

rightbox.style.display='none'

})

leftphone.addEventListener('mousemove',function(e){

varx=e.pageX-this.offsetLeft;

vary=e.pageY-this.offsetTop;

//x的移動距離

vartotalx=x-cover.offsetWidth/2;

vartotaly=y-cover.offsetHeight/2

if(totalx0){

totalx=0;

}elseif(totalx=leftphone.offsetWidth-cover.offsetWidth){

totalx=leftphone.offsetWidth-cover.offsetWidth;

}

if(totaly0){

totaly=0;

}elseif(totaly=leftp