原生js实现放大镜特效

本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下

掌握页面元素定位和移动

放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置

技术点：事件捕获、定位

offsetLeft与style.left的对比：
1）offsetLeft是与父级元素的距离，不包过滚动条的距离
2）style.left返回的是字符串，如30px，offsetLeft返回的是数值30
3）style.lft是可读写的，offsetLeft是只读的，所以要改变div的位置只能修改style.left
4）style.left的值需要事先定义，否则取到的值为空
难点：计算：如何让小图片的放大镜和大图片同步移动

距离定位图解：

具体代码：

 
 


 *{
 margin: 0;
 padding: 0;
 }
 #demo{
 display: block;
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 #small-box{
 position: relative;
 z-index: 1;
 }
 #float-box{
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity=50);
 opacity: 0.5;
 }
 #mark{
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity=0);
 opacity: 0;
 z-index: 10;
 }
 #big-box{
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 }
 #big-box img{
 position: absolute;
 z-index: 5;
 }




 
 
 
 
 
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。