jQuery实现网页放大镜功能

京东等电商网站中可以对商品进行放大观察，本文要实现的就是模仿这个放大镜功能，大致效果如下图所示:

简要说明实现思路：

1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏

2.先定下放大比例，例如本文原图大小为1000*1000，可以把原图窗口的图片设为400*400，这样放大窗口就能实现2.5倍的放大效果了（两个窗口的大小是一样的！！都是400*400）

3.首先实现小框框跟着鼠标移动的功能（本文设置鼠标总是在小框框的中心位置）

4.再实现放大窗口中的图片随着小框框的移动实现自身移动

5.鼠标(小框框)向右移动，放大窗口中的图片是要向左移动的！他们的方向总是相反

6.小框框大小不是随意设置，与放大倍数有关，本文放大2.5倍，则原图窗口应该也是小框框大小的2.5倍，即小框框大小160*160

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易放大镜的实现</title>
    <style>
        body,ul,li{padding: 0;margin: 0;list-style: none;}
        .orig,.fd{
            width: 400px;
            height: 400px;
            border:1px solid red;
            position: absolute;
        }
        .fd{

            left:410px;
            top:0;
            overflow: hidden;
            display: none;
        }

        .blocks{
            /*小图的宽高比例
                窗口的宽度 / 大图的宽度 * 窗口的宽度
            */
            width:160px;
            height:160px;
            background:rgba(254,238,167,.4);
            position: absolute;
            left: 0;
            top:0;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 建立显示原图窗口 -->

    <div class="orig">

        <!-- 插入要放大的图片 -->
        <img src="./images/3.jpg" alt="" width="400">

        <!-- 加入用于锁定放大区域的小框框 -->
        <div class="blocks"></div>
    </div>

    <!-- 建立显示放大图片的窗口 -->
    <div class="fd"><img src="./images/3.jpg" alt="" style="position: absolute;">
    </div>

    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        // 绑定鼠标移入原图窗口事件
        $('.orig').mouseover(function(e){
                $('.fd').css('display','block');
                $('.blocks').css('display','block');

        })
        //绑定鼠标在原图窗口移动的事件
        $('.orig').mousemove(function(e){

                // 获取鼠标当前的位置
                var x=e.clientX;
                var y=e.clientY;
                // 获取原图窗口距离文档的偏移位置
                var sX=$('.orig').offset().left;
                var sY=$('.orig').offset().top;

                // 计算鼠标的相对位置（相对于原图窗口的偏移距离）
                var mx=x-sX;
                var my=y-sY;

                // 获取小框框的宽高
                var mw=$('.blocks').width()/2;
                var mh=$('.blocks').height()/2;

                // 鼠标移动后小框框的移动距离
                $('.blocks').css({left:mx-mw+'px',top:my-mh+'px'});

                // 获取小框框的偏移位置
                    var lw=$('.blocks').position().left;
                    var lh=$('.blocks').position().top;

                // 判断边界（小框框只能在原图窗口范围内移动）
                    var maxW=$('.orig').width()-$('.blocks').width()
                    var maxH=$('.orig').height()-$('.blocks').height()
                    // 左边界
                    if(lw<=0){$('.blocks').css('left','0px');}
                    // 右边界
                    if(lw>=maxW){
                        $('.blocks').css('left',maxW+'px');
                    }
                    // 上边界
                    if(lh<=0){$('.blocks').css('top','0px');}
                    // 下边界
                    if(lh>=maxH){
                        $('.blocks').css('top',maxH+'px');
                    }

                    // 获取小框框的偏移位置
                    var lw=$('.blocks').position().left;
                    var lh=$('.blocks').position().top;
                // 计算鼠标在小图里的位置  *2.5计算大图移动的比例
                    var newX=lw*2.5;
                    var newY=lh*2.5;

                $('.fd img').css({left:-newX+'px',top:-newY+'px'});
        })
        //绑定鼠标离开原图窗口事件
        $('.orig').mouseout(function(){
                $('.fd').css('display','none');
                $('.blocks').css('display','none');
        })
    </script>
</body>
</html>