| 失效链接处理 |
|
基于JavaScript技...在Web页面实现放大镜效果 PDF 下载
相关截图：
 主要内容：
3.2.2获取鼠标在盒子内的坐标
遮罩层在预览图 img中，跟随鼠标移动的轨迹进行
移动，注意，鼠标的位移部分应该在遮罩层的中心坐标
处。可以通过鼠标e.pageX和e.pageY属性来获取鼠标的
坐标。需要通过offset系列的offsetLeft、offsetTop属性来
计算鼠标在 div 盒子 preview_img 内的坐标，offsetLeft 可
以返回元素相对其带有定位的父元素的左边框的位移，
offsetTop则是上边框的位移。因此获取到鼠标的坐标如
下：var x=e.pageX-this.offsetLeft; var y=e. pageY-this. off⁃
setTop。注意，this 是指当前对象鼠标的 offset 位移，在
绑定事件时，需要传递鼠标对象e作为参数。
3.2.3使用offset系列计算遮罩层shade盒子的位移
shade 盒子是定位在盒子 preview_img 中的，因此
shade 的横坐标是鼠标 x 坐标减去 shade 到左边的距离
shade.offsetX 的一半，纵坐标是鼠标 y坐标减去 shade到
上边的距离shade.offsetY的一半。遮罩层shade盒子移动
的 x 和 y 轴坐标为：var shadeX=x-shade. offsetWidth/2。
var shadeY=y-shade. offsetHeight/2； 还 需 计 算 遮 罩 层
shade 盒子的最大位移，应为盒子 preview_img 的 offset⁃
Width 减 去 盒 子 shade 的 offsetWidth， 结 果 如 下 。 var
maxLength=preview_img. offsetWidth-shade. offsetWidth。
需要对盒子shade进行位移判断，如果x 坐标小于0，就
让 shade 停在 0 的位置，并且不能超出最大宽度，如果
超出了最大宽度，就停在最大宽度的位置。
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
