商品放大镜效果

html片段

<div class="container">
            <div class="fix" id="fix">
                ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507431290210&di=b6322382cd7101c8017c140637e2510c&imgtype=0&src=http%3A%2F%2Fp1.gexing.com%2Fshaitu%2F20130217%2F1521%2F512084ef24570.jpg)
                <b class="zoom" id="zoom"></b>
            </div>
            <div class="show" id="show">
                ![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507431290210&di=b6322382cd7101c8017c140637e2510c&imgtype=0&src=http%3A%2F%2Fp1.gexing.com%2Fshaitu%2F20130217%2F1521%2F512084ef24570.jpg)
            </div>
</div>

js片段

<script>

var fix = document.getElementById("fix");
        var zoom = document.getElementById("zoom");
        var bgImg = document.getElementById("bigImg");
        var show = document.getElementById("show");
        fix.onmousemove = function(e){
            var e = e || event;
            var zoomx = e.clientX,
                zoomy = e.clientY,
                fixL = fix.offsetLeft;
                fixT = fix.offsetTop;
            zoom.style.left  = zoomx - fixL -zoom.clientWidth/2 +"px";
            zoom.style.top = zoomy - fixT -zoom.clientHeight/2+ "px";

            if(parseInt(zoom.style.left)<0){
                zoom.style.left = 0+"px";
            }
            if(parseInt(zoom.style.top)<0){
                zoom.style.top = 0+"px";
            }
            if(parseInt(zoom.style.left)>fix.clientWidth - zoom.clientWidth){
                zoom.style.left = fix.clientWidth - zoom.clientWidth + "px";
            }
            if(parseInt(zoom.style.top)>fix.clientHeight - zoom.clientHeight){
                zoom.style.top = fix.clientHeight - zoom.clientHeight + "px";
            }

            bigImg.style.left = -parseInt(zoom.style.left)*2.5+"px";
            bigImg.style.top = -parseInt(zoom.style.top)*2.5+"px";

            if(parseInt(bigImg.style.left) < -(bigImg.clientWidth- show.clientWidth)){
                bigImg.style.left = -(bigImg.clientWidth - show.clientWidth) + "px";
            }
            if(parseInt(bigImg.style.top)<-(bigImg.clientHeight- show.clientHeight)){
                bigImg.style.top = -(bigImg.clientHeight- show.clientHeight) + "px";
            }
        }



        </script>

css片段

<style>
            .container{
                width: 1600px;
                height: 800px;
                border:1px solid red;
                margin:0 auto;
            }
            .fix{
                position: relative;
                float: left;
                width: 400px;
                height: 400px;
                border:1px solid silver;
            }
            .fix img{
                width: 100%;
                height: 100%;
            }

            b{
                position: absolute;
                top:0;
                left: 0;
                width: 100px;
                height: 100px;
                border:1px solid silver;
                background-color: #fff;
                opacity: 0.4;
            }
            .show{
                float: left;
                position: relative;
                width: 400px;
                height: 400px;
                border:1px solid silver;
                overflow: hidden;
                margin-left: 50px;
            }
            .show img{
                position: absolute;
                top: 0;
                left: 0;
            }




        </style>