jq的图片放大镜效果

    <div class="imgbox">

        <div class="probox">

            <img src="" alt="">

            <div class="hoverbox"></div>

        </div>

        <div class="showbox">

            <img src="" alt="">

        </div>

    </div>

    .imgbox {

    position:relative;

    margin-left:100px;

}

.probox {

    width:300px;

    height:300px;

    border:1px solid #000;

}

.probox img {

    width:300px;

    height:300px;

    vertical-align:top;

}

.showbox {

    display:none;

    position:absolute;

    left:403px;

    top:;

    width:400px;

    height:300px;

    overflow:hidden;

    border:1px solid #ccc;

}

.showbox img {

    position:absolute;

    height:1200px;

    width:1200px;

}

.hoverbox {

    display:none;

    position:absolute;

    top:;

    background:#09f;

    border:1px solid #09f;

    height:75px;

    width:100px;

    cursor:move;

    z-index:;

}

function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) {

    var moveX = x - l - (h_w / 2);

    var moveY = y - t - (h_h / 2);

    if (moveX < 0) {

        moveX = 0

    }

    if (moveY < 0) {

        moveY = 0

    }

    if (moveX > imgbox.width() - h_w) {

        moveX = imgbox.width() - h_w

    }

    if (moveY > imgbox.height() - h_h) {

        moveY = imgbox.height() - h_h

    }

    var zoomX = showbox.width() / imgbox.width()

    var zoomY = showbox.height() / imgbox.height()

    showbox.css({

        left: -(moveX * zoomX),

        top: -(moveY * zoomY)

    })

    hoverbox.css({

        left: moveX,

        top: moveY

    })

}

function Zoomhover(imgbox, hoverbox, showbox) {

    var l = imgbox.offset().left;

    var t = imgbox.offset().top;

    var w = hoverbox.width();

    var h = hoverbox.height();

    var time;

    $(".probox img,.hoverbox").mouseover(function(e) {

        var x = e.pageX;

        var y = e.pageY;

        $(".hoverbox,.showbox").show();

        hoverbox.css("opacity", "0.3")

        time = setTimeout(function() {

            Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)

        }, 1)

    }).mousemove(function(e) {

        var x = e.pageX;

        var y = e.pageY;

        time = setTimeout(function() {

            Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)

        }, 1)

    }).mouseout(function() {

        showbox.parent().hide()

        hoverbox.hide();

    })

}

$(function() {

    Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img"));

})