jQ 放大鏡

html:

<div class="small_box">
        <span class="mask"></span>
        <div class="float_layer">
            <div class="big_box">
                <img src="pattern15.jpg">
            </div>
        </div>
        <img src="pattern15.jpg">
    </div>

css:

* {
            margin:0;
            padding:0;
        }
        .small_box {
            width:240px;
            height:240px;
            margin-left:10px;
            margin-top:10px;
            position:relative;
        }
        .small_box img {
            width:240px;
            height:240px;
        }
        .small_box .mask {
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.5);
            opacity:0;
            z-index:2;
            cursor:move;
        }
        .small_box .float_layer {
            position:absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background:rgba(0,0,0,0.5);
            display:none;
        }
        .big_box {
            position:absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow:hidden;
        }
        .big_box img {
            position:absolute;
            width: 500px;
            height: 500px;
        }

js:

$(".mask").mouseover(function() {
        $(".float_layer").show();
    });
    $(".mask").mouseout(function() {
        $(".float_layer").hide();
    });
    $(".mask").mousemove(function(e) {
        var layer=$(".float_layer"),
            box=$(".small_box");
        var l = e.pageX - box.offset().left - (layer.width() / 2);
        var t = e.pageY - box.offset().top - (layer.height() / 2);
        if (l < 0) {
            l = 0;
        };
        if (l > $(this).width() - layer.width()) {
            l = $(this).width() - layer.width();
        };
        if (t < 0) {
            t = 0;
        };
        if (t > $(this).height() - layer.height()) {
            t = $(this).height() - layer.height();
        };

        layer.css({
            "left": l,
            "top": t
        });
        var pX = l / ($(".mask").width() - layer.width());
        var pY = t / ($(".mask").height() - layer.height());
        $(".big_box img").css({
            "left": -pX * ($(".big_box img").width() - $(".big_box").width()),
            "top": -pY * ($(".big_box img").height() - $(".big_box").height())
        });
    })