第js模擬實(shí)現(xiàn)京東詳情頁圖片放大效果本文實(shí)例為大家分享了js實(shí)現(xiàn)京東詳情頁圖片放大的具體代碼，供大家參考，具體內(nèi)容如下

效果：

html:

div>

css:

.preview_img{

position:relative;

height:398px;

border:1pxsolid#ccc;

.mask{

display:none;

position:absolute;

width:300px;

height:300px;

top:0;

left:0;

background:#FEFE4F;

opacity:.5;

border:1pxsolid#ccc;

cursor:move;

.big{

display:none;

position:absolute;

width:550px;

height:550px;

top:0;

left:410px;

z-index:999;

border:1pxsolid#ccc;

overflow:hidden;

.bigimg{

position:absolute;

left:0;

top:0;

}

js(重點(diǎn))：

window.addEventListener(load,function(){

varpreview_img=document.querySelector(.preview_img

varmask=this.document.querySelector(.mask

varbig=this.document.querySelector(.big

varbigImg=this.document.querySelector(.bigImg

//鼠標(biāo)經(jīng)過

preview_img.addEventListener(mouseover,function(){

mask.style.display=block

big.style.display=block

//鼠標(biāo)移出去

preview_img.addEventListener(mouseout,function(){

mask.style.display=none

big.style.display=none

//鼠標(biāo)移動的時(shí)候

preview_img.addEventListener(mousemove,function(e){

//鼠標(biāo)在盒子內(nèi)的坐標(biāo)

varx=e.pageX-this.offsetLeft;

vary=e.pageY-this.offsetTop;

//遮擋層移動的距離

varmaskX=x-mask.offsetWidth/2;

varmaskY=y-mask.offsetHeight/2;

//大圖移動距離

//遮擋層的最大移動距離

varmaskMaxX=preview_img.offsetWidth-mask.offsetWidth;

varmaskMaxY=preview_img.offsetHeight-mask.offsetHeight;

//如果X坐標(biāo)小于0就讓它停留在0的位置

if(maskX=0){

maskX=0;

}elseif(maskX=maskMaxX){

maskX=maskMaxX;

//如果Y坐標(biāo)小于0就讓它停留在0的位置

if(maskY=0){

maskY=0;

}elseif(maskY=maskMaxY){

maskY=maskMaxY;

//遮擋層移動

mask.style.left=maskX+px

mask.style.top=maskY+px

//大圖片最大移動距離

varbigMaxX=bigImg.offsetWidth-big.offsetWidth;

varbigMaxY=bigImg.offsetHeight-big.offsetHeight;

//大圖片的移動距離XY

//大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離

varbigX=maskX*bigMaxX/maskMaxX;

varbigY=maskY*bigMaxY/maskMaxY;

//大圖和小圖（鼠標(biāo)移動）方向相反