用射流研究…实现购物网站商品放大镜效果

放大镜效果就是把鼠标移到图片上的时候，旁边会有另外一张大的图片展示，放大镜效果，那这样的效果怎样实现的呢，我把代码发给大家，请大家参考。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题放大镜/title style * { margin 33600；padd : 0；} #经纱{宽度： 1184px高度：500 px余量：50px自动0;背景色： # CCC飞越：隐藏；padding: 10px相对位置：} # warp # minbox { width: 350px高度： 350像素；向左浮动：相对位置：} # maxbox { width: 400px高度： 400像素；绝对位置：左侧： 380像素飞越：隐藏；显示器：无；} # maxbox img { width: 800px高度： 800像素；绝对位置：} # con {左侧浮动：左边距左侧： 20px} #孟{宽度： 175px高度： 175像素；绝对位置：背景-颜色：黄色；opa city 33600.4 filter : alpha(不透明度=40);左： 0；top : 0；显示器：无；}/style/head body div id=' warp ' div id=' min box ' img src=' http : images/min。jpg ' alt=' p id=' Meng '/p/div id=' maxbox ' img src=' http : images/max。jpg ' alt=' '/div div id=' con ' img src=' http : images/msg。png ' alt=' '/div/script var min box=文档。getelementbyid(' .var孟=文档。getelementbyid('孟')；var maxbox=文档。getelementbyid(' maxbox ')；var maximg=maxbox。getelementsbytagname(' img ')[0]；var minimg=min box。getelementsbytagname(' img ')[0]；函数offsetTL(obj){ var ofL=0，OFt=0；while(obj){ OfL=obj。偏移物体。客户离开；ofT=obj。偏移位置。客户端顶部；obj=obj.offsetParent}返回{左侧：ofL，顶部： oft }；}最小盒子。onmousemove=function(e){ var e=e | | window。事件；孟。风格。display=' blockmaxbox。风格。display=' blockvar niubi 1=e . client x-偏移量t1(最小框).left-meng.clientWidth/2;//蒙板的X坐标var niubi 2=e . clienti-offset TL(最小箱).top-meng.clientHeight/2;//蒙板的Y坐标定义变量毕丽=maximg。客户端宽度/最小值。客户端宽度；if(牛币1=0){牛币1=0；} else if(牛鼻1=min box。客户端宽度-孟。客户端宽度){牛币1=最小盒。客户端宽度-孟。客户端宽度；} if(牛鼻2=0){牛鼻2=0；} else if(牛鼻2=min box。客户身高-孟。客户端高度){牛币2=最小盒。客户身高-孟。客户身高；}控制台。日志(牛笔1)；控制台。原木(牛璧2号)；孟。风格。left=niubi 1 ' px孟。风格。top=niubi 2 ' px马克西姆。风格。左=-parsent(孟。风格。左)*毕丽px '；马克西姆。风格。top=-parsent(孟。风格。顶部)*毕丽px '；}最小盒子。onmouseout=function(){孟。风格。显示='无'；maxbox。风格。显示='无'；}/脚本/正文/html效果如下：

希望本文所述对大家爪哇岛描述语言程序设计有所帮助。