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以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
版权声明:js仿淘宝商品放大预览功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。