一. 效果图

二. 原理讲解

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插件 之 放大镜的更多相关文章

  1. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  2. 编写jQuery插件（一）——插件约定及插件中的闭包

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...

  3. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  4. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  5. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

  6. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

  7. 如何用正确的姿势编写jQuery插件

    在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在 ...

  8. 如何编写jQuery插件

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  9. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

随机推荐

  1. 【loj6437】 【PKUSC2018】 PKUSC 计算几何

    题目大意:给你一个m个点的简单多边形.对于每个点i∈[1,n],作一个以O点为原点且过点i的圆,求该圆在多边形内的圆弧长度/圆长. 其中n≤200,m≤500. 我们将n个点分开处理. 首先,我们要判 ...

  2. 【hdu6058】 Kanade's sum 模拟

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6058 题目大意:给你一个$1$到$n$的排列,请求出该序列所有区间中第$k$大之和,若该区间内少于$ ...

  3. 数据结构---平衡查找树之B树和B+树（转）

    本文转载自:http://www.cnblogs.com/yangecnu/p/Introduce-B-Tree-and-B-Plus-Tree.html 前面讲解了平衡查找树中的2-3树以及其实现红 ...

  4. easyUI的分页，只显示第X 共Y页。改为显示 第X 页 共Y页

    如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...

  5. Hadoop集群维护

    HDFS小文件问题及解决方案:http://dongxicheng.org/mapreduce/hdfs-small-files-solution/ Hadoop升级方案(一):Hadoop 1.0内 ...

  6. 转载 linux umount 时出现device is busy 的处理方法--fuser

    http://www.cnblogs.com/spicy/p/6894333.html (原文链接) 当任何目录有 mount, 然后有程序使用/挂在那个目录上的话, 就没有办法 umount 掉, ...

  7. vue2.0实现底部导航切换效果

    使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

  8. jdk内置类javax.imageio.ImageIO支持的图片处理格式

    执行这段代码输出支持的图片处理格式 String readFormats[] = ImageIO.getReaderFormatNames(); String writeFormats[] = Ima ...

  9. asterisk与freepbx常用的命令

    asterisk 常用命令: 通过asterisk -r 连接我们的asterisk. 在CLI中常用的命令: sip show peers 显示所有的SIP peers(包括friends) sip ...

  10. Java中的四种引用

    引用定义 实际上,Java中存在四种引用,它们由强到弱依次是:强引用.软引用.弱引用.虚引用.下面我们简单介绍下这四种引用: 强引用(Strong Reference):通常我们通过new来创建一个新 ...