JS实现商品放大镜

html部分

<div class="s_box">
        <img src="./imgs/s.jpg" alt="" class="s_img">
        <span></span>
    </div>
    <div class="b_box">
        <img src="./imgs/b.jpg" alt="" class="b_img">
    </div>

css部分

        .s_box {
   
            border: 1px solid #ccc;
            float: left;
            width: 350px;
            height: 350px;
            position: relative;
        }
        .b_box {
   
            position: relative;
            display: none;
            margin-left: 20px;
            overflow: hidden;
            border: 1px solid #ccc;
            float: left;
            width: 350px;
            height: 350px;
        }
        /* span的宽高根据大图片所占位置决定 */
        span {
   
            display: none;
            position: absolute;
            background-color: red;
            opacity: .4;
            top: 0;
            left: 0;
        }
        .s_img{
   
            width: 350px;
            height: 350px;