这篇文章主要为大家详细介绍了js实现简单放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简单放大镜特效的具体代码，供大家参考，具体内容如下
先来看看效果：
写放大镜之前我们先来了解一下定位：
通常子绝父相 （父元素相对定位，子元素绝对定位）
元素的定位方式：
1、static 静态定位，所有元素，不添加任何定位方式时的默认状态
2、relative 相对定位，不脱离文档流，可以相对于自身的原始位置，位移
3、fixed 固定定位，完全脱离文档流，相对于浏览器的空白区域来位移， 且不会因为浏览器的滚动而滚动
4、absolute 绝对定位，完全脱离文档流，相对于上N级元素来定位， 如果父级元素没有相对、绝对或固定定位方式时，绝对定位的元素会向更上层查找。
我们先定位盒子和放大盒子的位置然后隐藏放大盒子
.box { width: 450px; height: 450px; margin: 100px 0 0 100px; border: 1px solid red; position: relative; } /* 右边大盒子 */ .bigBox{ width: 540px; height: 540px; position: absolute; top: 100px; left: 560px; border: 1px solid #ccc; overflow: hidden; display: none; } .bigBox img { position: absolute; left: 0; top: 0; } /* 覆盖物 */ .box .mask{ width: 260px; height: 260px; background-color: yellow; /*调整透明度 */ opacity: .4; position: absolute; left: 0; top: 0; /* 默认消失 */ display: none; }写js时我们要注意：
当页面加载完毕后，给box绑定鼠标进入和移出事件