利用原生js编写一个放大镜功能

　　介绍

本篇文章为大家展示了利用原生js编写一个放大镜功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> 1。查找元素

, 1.1查总找主要分区
, 1.2查找小盒子
, 1.3查找小盒子内的img小图片
, 1.4查找面具遮罩层
, 1.5查找大盒子
, 1.6查找大盒子内的img大图片,

<强> 2。鼠标移入主要的时候

, 2.1显示遮罩盒子
, 2.2显示大图分区

<强> 3。鼠标移出主要的时候

, 3.1隐藏遮罩盒子
, 3.2隐藏大图分区

<强> 4。鼠标在主要移动的时候! ! !

, 4.1遮罩盒子跟随鼠标移动
, 4.2遮罩盒子在鼠标中心处理
, 4.3遮罩盒子在分区边界内移动处理
, 4.4大图片& lt;反向比;& lt;按比例比;跟随鼠标移动

,获取元素偏移值和宽高

, 1。获取分区的水平,垂直偏移值
, 2。获取分区的宽度,高度
, 3。获取遮罩盒子的宽度,高度(隐藏的盒子无法获取宽高)
, 4。获取大图片的宽度,高度(隐藏的盒子无法获取宽高)

html代码:

& lt; body> 　　& lt; !——整个大盒子——比; 　　& lt; div类=癿ain"id=癿ain"比; 　　& lt; div类=皊mall"祝辞 　　& lt; !——小图——比; 　　& lt; img alt=?“类=皊mallImg"https://www.yisu.com/zixun/src=" . ./img/iphoneX.jpg " width=" 350 "/> 　　<！——遮挡层,黄色的小方块- -> 　　

　　

　　 　　

　　 　　 　　

　　

css代码:

 & lt; style>
　　* {
　　保证金:0;
　　填充:0;
　　}
　　
　　.main {
　　宽度:350 px;
　　身高:350 px;
　　保证金:100 px;
　　边界:1 px固体# ccc;
　　位置:相对;
　　}
　　
　　.big {
　　宽度:400 px;
　　身高:400 px;
　　位置:绝对的;
　　上图:0;
　　左:360 px;
　　边界:1 px固体# ccc;
　　溢出:隐藏;
　　显示:没有;
　　}
　　
　　.mask {
　　宽度:175 px;
　　身高:175 px;
　　背景:rgba (255、255、0、0.4);
　　位置:绝对的;
　　上图:0 px;
　　左:0 px;/*把鼠标指针换成移动图标*/光标:移动;
　　显示:没有;
　　}
　　
　　.small {
　　位置:相对;
　　身高:350 px;
　　宽度:350 px;
　　}
　　
　　.active .mask,
　　.active .big {
　　显示:块;
　　}
　　
　　.big img {/*相对定位:相对自己原本的位置定位,原来的位置保留的*/位置:绝对的;
　　}
　　& lt;/style> 

javascript代码: