放大镜特效是电商网站常用效果指鼠标滑过图片时会出现图片的局部放大镜特效放大图,使用JS就可实现下面是最终效果图:
鼠标在小图片上移动时,通过捕获鼠标在尛图标上的位置定位大图标相应的位置
鼠标移动,放大镜随之移动并且当大制定部分
onmouseover : 鼠标指针移动到指定对象时触发onmouseout: 鼠标指针移絀指定对象时触发
offsetTop:子元素相对父元素的上位移
鼠标在小图片上移动时,通过捕获鼠标在尛图标上的位置定位大图标相应的位置
鼠标移动,放大镜随之移动并且当大制定部分
onmouseover : 鼠标指针移动到指定对象时触发onmouseout: 鼠标指针移絀指定对象时触发
offsetTop:子元素相对父元素的上位移
点击一个图片然后出现遮罩层,放大的图片点击遮罩层回到原图