前端编程之页面放大镜功能的实现

　　淘过宝的都知道，有些网站需要对商品进行放大镜功能，也就是当鼠标移动到商品上面时，会在旁边出现细节的放大效果，这对于一些商城类网站来说，是一定需要具备的，那么页面放大镜功能是如何来实现的呢?下面就跟大家分享一下。

　　实现代码：

    <style>

        html,body{

            margin: 0;

            padding: 0;

        }

        .main{

            width: 1200px;

            margin: 100px auto 0;

            display: flex;

        }

        .box{

            width: 400px;

            height: 500px;

            position: relative;

            border: 1px solid red;

            display: flex;

            flex-flow: column;

            justify-content: space-between;

            padding: 5px;

        }

        .box_top{

            width: 400px;

            height: 400px;

            display: flex;

            

            position: relative;

            border: 1px solid green;

        }

        .box_top_left{

            width: 400px;

            height: 400px;

            position: relative;

        }

        .box_top_left_999{

            width: 100%;

            height: 100%;

            position: absolute;

            z-index: 999;

        }

        .box_top_left_99{

            wi