用js实现一个放大镜的效果

html:

**<div class="box" id="box">
    <div id="smallBox" class="smallBox">
        <img src="images/001.jpg" width="350" alt=""/>
        <div id="mask" class="mask"></div>
    </div>
    <div id="bigBox" class="bigBox">
        <img src="images/0001.jpg" id="bigImg" width="800" alt=""/>
    </div>
</div>

css:

  {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .bigBox {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .smallbox {
            position: relative;
        }
        .box img {
            vertical-align: top;
        }
        #bigBox img {
            position: absolute;
        }

js:

效果图