自己编写jQuery插件之放大镜

一. 效果图

二. 原理讲解

1. 用到了两张图片，一张小图，一张大图。

2. 小图用于直接在页面上显示，大图则用于放大镜内显示

3. 放大镜实际是一个div，而大图则是这个div的背景图

4. 小图与大图是等比例的，从而达到最佳放大效果

5. 当没设置大图时，则大图为小图本身，此种情况放大效果不明显，相当于没放大一样

6. 这里借助于鼠标移动事件（即：mousemove），通过鼠标在小图上的移动坐标和大小图的比例（比例计算得来），从而计算出放大镜内的背景图对应的坐标位置。

三. 插件实现代码

(function () {
    $.fn.magnifier = function (options) {

        //默认参数设置
        var settings = {
            diameter: 150,                   //放大镜的直径大小
            backgroundImg: "img/larger.jpg"  //放大镜内的图片（即大图）
        };

        //合并参数
        if (options){
            $.extend(settings, options);
        }

        //链式原则
        return this.each(function () {
            
            var root = $(this),                 //存储当前对象           
                wRoot = root.width(),           //当前对象宽
                hRoot = root.height(),          //当前对象高
                offset = root.offset(),         //偏移量 left 和 top
                magnifier = $(".magnifier"),    //放大镜对象
                wRatio = 0,                     //缩放比率－宽度
                hRatio = 0,                     //缩放比率－高度
                backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src"); //大图（当没有大图时，为小图本身）

            //设置放大镜样式
            magnifier.css({
                width : settings.diameter+"px", 
                height : settings.diameter+"px", 
                borderRadius : (settings.diameter / 2) + "px",
                backgroundImage: "url('" + backgroundImg + "')" }); //将图片放入放大镜内

            /* 图片加载完，计算缩放比例
             * 由于图片原本不在DOM文档里，
             * 因此页面加载时不会触发load事件，
             * 因此要通过执行appendTo来触发load事件 */
            $("<img style='display:none;' src='" + backgroundImg + "' />").load(function () {
                wRatio = $(this).width() / wRoot;
                hRatio = $(this).height() / hRoot;
            }).appendTo(root.parent());

            //放大镜及其背景图片位置控制
            function _position(e) {

                var lPos = parseInt(e.pageX - offset.left),
                    tPos = parseInt(e.pageY - offset.top);

                //判断鼠标是否在图片上
                if (lPos < 0 || tPos < 0 || lPos > wRoot || tPos > hRoot) {

                    magnifier.hide(); //不在隐藏放大镜

                } else {

                    magnifier.show(); //反之显示放大镜

                    //控制放大镜内背景图片的位置   （settings.diameter / 2）半径
                    lPos = ((e.pageX - offset.left) * wRatio - settings.diameter / 2) * (-1);
                    tPos = ((e.pageY - offset.top) * hRatio - settings.diameter / 2) * (-1);

                    magnifier.css({ backgroundPosition: lPos + 'px ' + tPos + 'px' });

                    //控制放大镜本身位置
                    lPos = e.pageX - settings.diameter / 2;
                    tPos = e.pageY - settings.diameter / 2;

                    magnifier.css({ left: lPos + 'px', top: tPos + 'px' });
                }
            }

            //放大镜
            magnifier.mousemove(_position);

            //当前对象
            root.mousemove(_position);

        });
    };
})();

四. Html结构

<div class="box">
     <img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
     <div class="magnifier"></div> <!-- 放大镜div （上一个版本此div是直接定义在js里面的） -->
</div>

五. 放大镜样式

/*放大镜样式*/
.magnifier{
    background-position: 0px 0px;
    background-repeat: no-repeat;
    position: absolute;
    box-shadow: 0 0 5px #777, 0 0 10px #aaa inset;
    display: none;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border:2px solid #FFF;
    cursor: none;
}

之前放大镜及其样式都是写在js代码里面的，为了做到更好的分离，所以此次修改后将放大镜div和css样式抽出来了。

六. 使用示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery放大镜插件</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <h2 class="title">jQuery放大镜插件</h2>

    <div class="box">
        <img src="img/small.jpg" id="img-small" width="500" height="333" /> <!-- 小图 -->
        <div class="magnifier"></div> <!-- 放大镜div -->
    </div>

    <script type="text/javascript" src="script/jquery.min.js"></script>
    <script type="text/javascript" src="script/jquery.similar.magnifier.js"></script>
    <script type="text/javascript">
        $("#img-small").magnifier();
    </script>
</body>
</html>

自己编写jQuery插件 之 放大镜

自己编写jQuery插件之放大镜