JS无死角实现八倍镜

JS实现放大镜

开发工具与关键技术:DW,js
作者:蛋蛋
撰写时间:2019年2月10日

一:把一张图片可滑动鼠标放大可区域图
Ø 先把一个大的盒子包裹住用div id=”box”>
Ø 滑块,左右两侧分别一个div
Ø 再写CSS样式
在这里插入图片描述
1.左边的图片缩小为右边的一半;滑块的布局就用到定位,
2.Rgba(255,255,255,0.3)注释:255为最大值,最后0.3为透明度。
接下来看JS布局:
在这里插入图片描述

left:当前移入的X轴减掉滑块宽的一半。

Top:当前移入的Y轴减掉滑块高的一半。

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_42577408/article/details/86999447