js仿淘宝商品放大预览功能

将鼠标移动至图片区域可放大预览

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { padd :0；边距：0} # img1 {宽度：300px高度：200 px} # sp1 { width:60px高度：40 px绝对位置：left :0 top :0 background : rgba(62，55，58，0.4)} # img 2 { width :2250 px；高度高度：1500像素绝对位置：} div { width:450px高度：300 px绝对位置：左侧left:310pxtop:0飞越：隐藏；border:2px纯黑；显示器：无；}/style脚本窗口。onload=function(){ var img 1=document。getelementbyid(' img 1 ')；var img 2=文档。getelementbyid(' img 2 ')；var sp=文档。getelementbyid(' SP1 ')；var oBox=document。getelementbyid(' box ')；物种onmouseover=function(){ obox。风格。display=' block};物种onmouseout=function(){ ObOx。风格。显示='无'；};文件。onmousemove=function(ev){ var x=(ev。clientx | |事件。clientx)-sp。offset withts/2；var y=(ev。clienty | | event。clienty)-sp。偏右/2；if((ev。clientx | |事件。clientx)sp。offset withts/2){ x=0；} if((ev。clientx | |事件。clientx)img 1。偏移距离。offset with/2){ x=img 1。偏移距离。偏移；} if((ev。clienty | | event。clienty)sp。offset theight/2){ y=0；} if((ev。clienty | | event。客户端)img 1。补偿热量。偏置热量/2){ y=img 1。补偿热量。抵消热量；} if((ev。clientx | |事件。clientx)300(ev。clienty | | event。clienty)200){ sp。风格。left=x ' px物种风格。top=y ' pximg 2。风格。left=-x *(img 2)。offset with/img 1。offsetwithts)' px '；img 2。风格。top=-y *(img 2)。偏移右侧/img 1。offset theight)' px '；} } }/script/head dyimg src=' http :https://timg sa。百度。com/timg？图像质量=80 size=b 9999 _ 10000 sec=1489083204637 di=244 Fe 324 db 033 fc 826 de 48 e 90d 2373 f 0 img type=0 src=http://pic 2015。5442 .com/2016/0328/025/5。jpg % 21960。jpg ' alt=' id=' img 1 ' span id='图像质量=80 size=b 9999 _ 10000 sec=1489083204637 di=244 Fe 324 db 033 fc 826 de 48 e 90d 2373 f 0 img type=0 src=http://pic 2015。5442 .com/2016/0328/025/5。jpg % 21960。jpg ' alt=' id=' img 2 '/div/body以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！