在图片上加入放大镜的效果可以给用户带来不一样的体验，丰富网页。所以也被广泛的用于网页中，其实实现放大镜效果难度并不是很大，下面介绍下怎样利用Jquery在网页中实现放大镜的效果。

需要2张图片（一大一小）和2个html div元素，第一个用来加载小图，第二个用来加载小图局部的放大的图片。

css代码：

#Main {
    width: 240px;
    height: 350px;
    border: 1px solid #fff;
    background-image: url(imgS.jpg);
    margin: 0 auto;
    margin-top: 100px;
}
#child {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    background-image: url(imgB.jpg);
    background-position: 0px 0px;
    cursor: pointer;
}

html代码：

<div id="Main">
    <div id="child"></div>
</div>

javascript代码(需要引入Jquery文件)：

 $(document).ready(function(e) {
            var flag = false;
            $("#Main").hover(function() {
                flag = true;
            });
            $(this).mousemove(function(e) {
                if (flag == false) return;
                var x = e.clientX - $("#Main").offset().left-50;
                var y = e.clientY - $("#Main").offset().top-50;
         
                if (x >= 0 && x <= 140) {
                    $("#child").css("margin-left", x   "px");
                    $("#child").css("background-positionX", -x * 2   "px");
 
                }
                if (y >= 0 && y <= 250) {
                    $("#child").css("margin-top", y   "px");
                    $("#child").css("background-positionY", -y * 2  "px");
                }
            }, function() {});
        });

这样就实现了一个简单的放大镜效果。