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:0;
    width:400px;
    height:300px;
    overflow:hidden;
    border:1px solid #ccc;
}
.showbox img {
    position:absolute;
    height:1200px;
    width:1200px;
}
.hoverbox {
    display:none;
    position:absolute;
    top:0;
    background:#09f;
    border:1px solid #09f;
    height:75px;
    width:100px;
    cursor:move;
    z-index:10;
}

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"));
})

引入jq就可以使用了