一. 效果图

二. 原理讲解

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. 调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标

    最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的.真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整 ...

  2. 剑指offer五十九之按之字形顺序打印二叉树

    一.题目 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推.二.思路 详见代码 三.代码 import j ...

  3. 漫谈NIO(3)之Netty实现

    1.前言 上一章结合Java的NIO例子,讲解了多路IO复用的一个基本使用方法,通过实际编码加深对其理解.本章开始进入Netty的环节,前面两章都是为了Netty进行铺垫说明.此节将对比Java的NI ...

  4. Linq基础知识小记二

    书写Linq查询有两种方法,第一种是通过方法语法(也就是扩展方法),第二种是查询表达式语法. 1.方法语法 方法语法就是通过扩展方法和Lambda表达式来创建查询 (1).链式查询 这种查询方式很多语 ...

  5. Eclipse-查看jar源码乱码问题解决

    步骤1: 在eclipse菜单栏中,Window–>Preferences–>General–>Content types,将JAR Content , Java Class Fil ...

  6. springboot-4-整合fastjson

    使用fastjson作为springboot的默认json解析, 原来使用的是jackson 1, 引入依赖 <dependencies> <dependency> <g ...

  7. Solidity两个string的比较

    有三种比较方法 方法一:比较string的哈希值方法二:先比较string的长度,再比较每个对应位置的字母是否相同方法三:先比较string的长度,再比较string的哈希值一.比较string的哈希 ...

  8. SpringMVC源码阅读：异常解析器

    1.前言 SpringMVC是目前J2EE平台的主流Web框架,不熟悉的园友可以看SpringMVC源码阅读入门,它交代了SpringMVC的基础知识和源码阅读的技巧 本文将通过源码(基于Spring ...

  9. 个人总结（Alpha阶段）

    Alpha总结 我们在alpha 结束之后, 每位写一个博客, 回顾并总结自己的alpha 过程,哪些方面做的好的,哪些方面做得不足需要改进的 提出问题 同时,大家一定会在过程中产生了很多问题, 结合 ...

  10. VF

    VF 描述 Vasya is the beginning mathematician. He decided to make an important contribution to the scie ...