第js仿淘寶商品放大預(yù)覽功能效果圖：

代碼如下：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTitle/title

style

*{padding:0;margin:0;}

#img1{width:300px;height:200px;}

#sp1{width:60px;height:40px;position:absolute;left:0;top:0;background:rgba(62,55,58,0.4)

#img2{width:2250px;height:1500px;position:absolute;}

div{width:450px;height:300px;position:absolute;left:310px;top:0;overflow:hidden;border:2pxsolidblack;display:none;}

/style

script

window.onload=function(){

varimg1=document.getElementById('img1');

varimg2=document.getElementById('img2');

varsp=document.getElementById('sp1');

varoBox=document.getElementById('box');

sp.unction(){

oBox.style.display='block';

sp.onmouseout=function(){

oBox.style.display='none';

document.onmousemove=function(ev){

varx=(ev.clientX||event.clientX)-sp.offsetWidth/2;

vary=(ev.clientY||event.clientY)-sp.offsetHeight/2;

if((ev.clientX||event.clientX)sp.offsetWidth/2){

x=0;

if((ev.clientX||event.clientX)img1.offsetWidth-sp.offsetWidth/2){

x=img1.offsetWidth-sp.offsetWidth;

if((ev.clientY||event.clientY)sp.offsetHeight/2){

y=0;

}if((ev.clientY||event.clientY)img1.offsetHeight-sp.offsetHeight/2){

y=img1.offsetHeight-sp.offsetHeight;

if((ev.clientX||event.clientX)300(ev.clientY||event.clientY)200){

sp.style.left=x+'px';

sp.style.top=y+'px';

img2.style.left=-x*(img2.offsetWidth/img1.offsetWidth)+'px';

img2.style.top=-y*(img2.offsetHeight/img1.offsetHeight)+'px';

/script

/head

body

imgsrc="/timgimagequality=80size=b9999_10000sec=1489083204637di=244fe324db033fc826de48e90d2373f0imgtype=0src=http%3A%2F%2F%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg

"alt=""id="img1"

spanid="sp1"/span

divid="box"

imgsrc="/timgimagequality=80size=b9999_10000sec=1489083204637di=244fe324db033fc826de48e90d2373f0imgtype=0src=http%3A%2F%2F%2F2016%2F0328%2F025%2F5.jpg%2521