学习Js-day18

放大镜的简单实现

效果图如下：

对结构，布局，效果，进行分析“

一、结构分析：
1.一个小盒子box包着一个移动的盒子move，再连接一个大盒子bigbox展示图片的细节。
二、布局分析：
1.放小图的的盒子box设置相对定位
2.移动盒子move设置绝对定位
3.放大图的盒子big设置相对定位，在盒子box的右边，大图作为放大图的盒子的背景
三、效果分析：
1.鼠标移入小图，移动的盒子和大图出现，且遮罩移动的过程中，大图显示的图片也随着移动盒子在小图上的位置相应改变
2.鼠标离开小图，大图隐藏

CSS部分

*{
            margin: 0;
            padding: 0;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .box {
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            position: relative;
            float: left;
        }
        .box>img{
            width: 250px;
            height: 250px;
        }
        .move {
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(255, 255, 0, 0.8);
        }

        .bigbox {
            width: 540px;
            height: 540px;
            position: relative;
            float: left;
            overflow: hidden;
            border: 1px solid #000;
        }

        .bigbox>img {
            position: absolute;
            width: 800px;
            height: 800px;
            background-color: red;
        }

HTML部分

<div class="box">
        <img src="./

标签：smallBox,style,targetPoint,move,Js,学习,bigImg,bigBox,day18	

From： https://www.cnblogs.com/liu-2001/p/16596462.html