js实现简单放大镜特效
本文实例为大家分享了js实现简单放大镜特效的具体代码，供大家参考，具体内容如下
先来看看效果：
写放大镜之前我们先来了解一下定位：
通常子绝父相（父元素相对定位，子元素绝对定位）
元素的定位方式：
1、static 静态定位，所有元素，不添加任何定位方式时的默认状态
2、relative 相对定位，不脱离文档流，可以相对于自身的原始位置，位移
3、fixed 固定定位，完全脱离文档流，相对于浏览器的空白区域来位移，且不会因为浏览器的滚动而滚动
4、absolute 绝对定位，完全脱离文档流，相对于上N级元素来定位， 如果父级元素没有相对、绝对或固定定位方式时，绝对定位的元素会向更上层查找。
我们先定位盒子和放大盒子的位置然后隐藏放大盒子
.box{
width:450px;
height:450px;
margin:100px00100px;
border:1pxsolidred;
position:relative;
}
/*右边大盒子*/
.bigBox{
width:540px;
height:540px;
position:absolute;
top:100px;
left:560px;
border:1pxsolid#ccc;
overflow:hidden;
display:none;
}
.bigBoximg{
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绑定鼠标进入和移出事件