最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生js实现放大镜特效
时间：2017-06-07 编辑：简简单单 来源：一聚教程网
掌握页面元素定位和移动
放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置
技术点：事件捕获、定位
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; }
| |