本文实例为大家介绍了基于爪哇岛描述语言实现放大镜效果的原理和代码，分享给大家供大家参考，具体内容如下：

原理：

A:放大镜乙：小图片

c:大图片可视区域

d:大图片

鼠标的位置应该在放大镜的中央，所以鼠标位置为：

client x=a . offsetleft()b . offsetleft 1/2 * a . offsetweidth；

clientY=a .偏置顶()b .偏置顶1/2 * a .偏置心；

鼠标移动过程中：放大镜A和大图D是一起随鼠标成比例运动的，因为当放大镜A的右边框移动到与小图B的右边框重合时，大图D也应该移动到了右边框与C的右边框重合的地方，所以，他们的移动比例是：(d .偏移量为-c .偏移量为)/(b .偏移量为-a .偏移量为)=b/a

超文本标记语言部分：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '/标题放大镜效果/title style * { margin 33600；划水：0;} #演示{位置：相对；余量：30像素50像素宽度： 1000像素；高度： 600像素；border: 1px固体# 000;} #赵哲{ position: absolutez索引：2;背景：红色；宽度width :402 px h8 :402 pxleft 3360 20pxtop :20 pxo pa city 3360 0；} #小{ position:绝对值宽度宽度：402 px h8 :402 pxl eft : 20pxtop :20 px border : 1px固体# 000;z-index : 1；} #小img {位置：绝对值；} # big { position : relative to p : 20 pxleft : 460 px宽度宽度：500像素高度：500 pxborder: 1px固体# 000;飞越：隐藏；显示器：无；z-index : 1；} # big img {位置：绝对值；} #玻璃{位置：绝对值宽度宽度：100像素高度： 100像素；opacity: 0.3背景：橙色；显示器：无；}/style/head dydiv id=' demo ' div id='赵哲/div！-在工程师协会浏览器中，当鼠标在放大镜上是，浏览器并不认为鼠标同样在小图的差异上，所以加个遮罩层兼容ie-div id=' small ' img src=' images/small。png ' alt=' div id=' glass '/div/div div id=' big ' img src=' images/big。jpg ' alt=' '/div/div/body/html js部分：

脚本窗口。onload=function(){ var demo=document。getelementbyid(' demo ')；var small=文档。getelementbyid(' small ')；var big=文档。getelementbyid(' big ')；var glass=文档。getelementbyid(' glass ')var image=document。getelementbyid(' big ').getElementsByTagName(' img ')[0]；定义变量赵哲=document.getElementById('赵哲');赵哲。onmouseover=function(){ glass。风格。显示=' block '大。风格。显示=' block ' }赵哲。onmouseout=function(){ glass。风格。显示=“无”大。风格。display=' none ' }//弄清楚clientX，offsetLeft，左侧的关系，注意区分赵哲。onmousemove=function(ev){ var event=ev var left=event。clientx-demo。偏置-小。偏心玻璃。offsetweidth/2；var top=事件。客户演示。偏移顶部-小。偏移顶-glass.offsetHeight/2；if(left 0){ left=0；}else if(左(小。玻璃胶印。offset with)){ left=small。玻璃胶印。偏移量为} if(top 0){ top=0；} else if(top(小。偏移光玻璃。向右偏移){ top=小。偏移光玻璃。向右偏移}玻璃。风格。left=left ' px玻璃。风格。top=top“px”；var百分比=(图像。中间偏大。offset with)/(小。中间玻璃。偏移)图像。风格。left=-percent * left ' px '图像。风格。top=-百分比* top ' px ' } }/script以上就是本文的全部内容，希望对大家实现爪哇岛描述语言放大镜效果有所帮助。