jq实现放大镜查看商品大图效果

 <div id="tab">
        <!--中间区域-->
        <div class="mid-box">
            <div class="zoom"></div><!--放大镜-->
        </div>
        <!--小图区域-->
        <div class="small-box">
            <img src="../img/small1.jpg" alt="小图" style="border:1px solid red"/>
            <img src="../img/small2.jpg" alt="小图" />
            <img src="../img/small3.jpg" alt="小图" />
            <img src="../img/small4.jpg" alt="小图" />
            <img src="../img/small5.jpg" alt="小图" />
            <img src="../img/small6.jpg" alt="小图" />

        </div>
        <!--大图区域-->
        <div class="big-box">
            
        </div>	
    </div>

* {
    margin: 0;
    padding: 0;
    outline:none;
}
#tab{
    width:350px;
    border:1px solid #ff0000;
    margin:50px;
    position:relative;
}
.mid-box{
    width:350px;
    height:449px;
    background:url("../img/mid1.jpg");
    margin-bottom:10px;
    transition:all 1s;/*图片过渡时间*/
    -webkit-transition:all 1s;
    position:relative;
}

.zoom{
    width:120px;/*尽量与大图小图的比例一致*/
    height:154px;
    background:rgba(0,0,0,.3);
    position:absolute;
    left:-180px;
    cursor:move;
}
.big-box{
    width:350px;
    height:449px;
    border:1PX solid red;
    position:absolute;
    top:0px;
    left:360px;
    background:url("../img/big1.jpg") no-repeat 0 0;
    display:none;
}

/// <reference path="jquery-1.10.2.min.js" />
$(function () {
    var arrimg = ['url(../img/mid1.jpg)','url(../img/mid2.jpg)','url(../img/mid3.jpg)',
        'url(../img/mid4.jpg)', 'url(../img/mid5.jpg)', 'url(../img/mid6.jpg)'];

    var arrbigimg = ['url(../img/big1.jpg)','url(../img/big2.jpg)','url(../img/big3.jpg)',
        'url(../img/big4.jpg)', 'url(../img/big5.jpg)', 'url(../img/big6.jpg)'];

    $(".small-box img").mouseover(function () {
        var i = $(this).index();
        $(".mid-box").css('background', arrimg[i]);//点击小图实现中图tab切换

        $(".big-box").css('background', arrbigimg[i]);//大图切换
        $(this).css('border', '2px solid #ff0000').siblings().css('border', '2px solid transparent');
    });

    $(".mid-box").mousemove(function (e) {
        var x = e.pageX;
        var y = e.pageY;//获得鼠标位置 相对于整个文档
        mbL = $(".mid-box").offset().left;
        mbT = $(".mid-box").offset().top;//元素相对于文档偏移坐标
        zoomW = $(".zoom").width();
        zoomH = $(".zoom").height();
        var dx = x - mbL - zoomW/2;
        var dy = y - mbT - zoomH/2;

        $(".zoom").css({ 'left': dx + 'px', 'top': dy + 'px' });

        var zooml = parseFloat($(".zoom").css("left"));//获取放大镜左边位置
        var zoomt = parseFloat($(".zoom").css("top"));

        if (zooml <= 0) {
            $(".zoom").css('left', 0);//限制左边界
            zooml = 0;//镜片移到左边界时
        } else if (zooml >= 230) {
            $(".zoom").css('left', '230px');//限制右边界    
            zooml = 230;
        }

        if (zoomt <= 0) {
            $(".zoom").css('top', 0);//限制上边界
            zoomt = 0;//镜片移到上边界时
        } else if (zoomt >= 295) {
            $(".zoom").css('top', '295px');//限制下边界
            zoomt = 295;
        }

        //准确获取大图比例
        var posX = -zooml * (350 / 120) + 'px';
        var posY = -zoomt * (449 / 154) + 'px';
        var bigscale=(350/120*100)+'%';
        $(".big-box").css({
            'display': 'block', 'backgroundPositionX': posX,
            'backgroundPositionY': posY, 'background-size': bigscale
        });
    });

    $(".mid-box").mouseleave(function () {
        $(".zoom").css('left', '-180px');//鼠标移开 放大镜消失
        $(".big-box").css('display','none');
    });
});

总结：小图到中图的切换可以看做tab切换效果，在这其中我用到的是数组存放中图和大图，随着小图index值的改变从而改变数组下标，达到切换的效果；

放大镜代码:

var dx = x - mbL - zoomW/2;    var dy = y - mbT - zoomH/2;

这样可以保证鼠标始终在放大镜中央，然后需要关注的是放大镜的边界问题；

为准确获得放大的比例：

var posX = -zooml * (350 / 120) + 'px';
var posY = -zoomt * (449 / 154) + 'px';

当然也可以在big-box直接使用background-size：350/120*100%