引语：jQuery提供了很多插件，我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件，单我们除了懂得使用别人已编写好的插件以外，也到懂得如何封装属于我们自己的插件，以下就是封装jQuery插件的步骤，以放大镜效果为例。
 附效果文件：下载
1、导入素材，已经封装成jQ版的放大镜
 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 *{ margin:0; padding:0;}

 #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}

 #kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:0; top:0; opacity:0.5; display:none;}

 #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}

 #max img{ position:absolute;}

 </style>

 <script src="jquery1.9.1.js"></script>

 <script>

 $(function (){

 $("#min").hover(function (){

 $("#kuai").show();

 $("#max").show();

 },function (){

 $("#kuai").hide();

 $("#max").hide();

 });

 $("#min").mousemove(function (event){

 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;

 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;

 var maxWidth=$("#min").width()-$("#kuai").width();

 var maxHeight=$("#min").height()-$("#kuai").height();

 if (disX<=0){

 disX=0;

 }

 else if (disX>maxWidth){

 disX=maxWidth;

 }

 if (disY<=0){

 disY=0;

 }

 else if(disY>maxHeight){

 disY=maxHeight;

 }

 $("#kuai").css({

 left:disX,

 top:disY

 });

 var scaleL=disX/maxWidth;

 var scaleT=disY/maxHeight;

 $("#max img").css({

 left:-scaleL*($("#max img").width()-$("#max").width()),

 top:-scaleT*($("#max img").height()-$("#max").height())

 });

 });

 });

 </script>

 </head>

 <body>

 <div id="min">

 <img src="min.jpg"/>

     <div id="kuai"></div>

 </div>

 <div id="max">

 <img src="max.jpg"/>

 </div>

 </body>

 </html>

　

 
2、在加载时动态创建结构
 var $fang=$('<div id="min">

 <img src="max.jpg"/>

     <div id="kuai"></div>

 </div>

 <div id="max">

 <img src="max.jpg"/>

 </div>');
 
3、图片地址换成用户的地址
 var $fang=$('<div id="min">'+

 '<img src="'+$(".oImg").attr("src")+'"/>'+

     '<div id="kuai"></div>'+

     '</div>'+

 '<div id="max">'+

 '<img src="'+$(".oImg").attr("src")+'"/>'+

 '</div>');
　
4、把创建的结构插到并图片前面
 $(".oImg").before($fang);
 
5、把用户定义的大图删除
$(".oImg").remove();
 
6、函数化，把对象作为参数obj传进去
 <script>

 function fang(obj){

 var $fang=$('<div id="min">'+

 '<img src="'+obj.attr("src")+'"/>'+

     '<div id="kuai"></div>'+

     '</div>'+

 '<div id="max">'+

 '<img src="'+obj.attr("src")+'"/>'+

 '</div>');

 obj.before($fang);

 obj.remove();

   $("#min").hover(function (){

 $("#kuai").show();

 $("#max").show();

 },function (){

 $("#kuai").hide();

 $("#max").hide();

 });

 $("#min").mousemove(function (event){

 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;

 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;

 var maxWidth=$("#min").width()-$("#kuai").width();

 var maxHeight=$("#min").height()-$("#kuai").height();

 if (disX<=0){

 disX=0;

 }

 else if (disX>maxWidth){

 disX=maxWidth;

 }

 if (disY<=0){

 disY=0;

 }

 else if(disY>maxHeight){

 disY=maxHeight;

 }

 $("#kuai").css({

 left:disX,

 top:disY

 });

 // 10/100

 var scaleL=disX/maxWidth;

 var scaleT=disY/maxHeight;

 $("#max img").css({

 left:-scaleL*($("#max img").width()-$("#max").width()),

 top:-scaleT*($("#max img").height()-$("#max").height())

 });

 });

 }

 $(function (){

 fang($(".oImg"));

 });

 </script>

　

 
 
7.插件化
 $.fn.extend({

 fang:function(){

 var $fang=$('<div id="min">'+

 '<img src="'+obj.attr("src")+'"/>'+

     '<div id="kuai"></div>'+

     '</div>'+

 '<div id="max">'+

 '<img src="'+obj.attr("src")+'"/>'+

 '</div>');

 obj.before($fang);

 obj.remove();

   $("#min").hover(function (){

 $("#kuai").show();

 $("#max").show();

 },function (){

 $("#kuai").hide();

 $("#max").hide();

 });

 $("#min").mousemove(function (event){

 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;

 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;

 var maxWidth=$("#min").width()-$("#kuai").width();

 var maxHeight=$("#min").height()-$("#kuai").height();

 if (disX<=0){

 disX=0;

 }

 else if (disX>maxWidth){

 disX=maxWidth;

 }

 if (disY<=0){

 disY=0;

 }

 else if(disY>maxHeight){

 disY=maxHeight;

 }

 $("#kuai").css({

 left:disX,

 top:disY

 });

 // 10/100

 var scaleL=disX/maxWidth;

 var scaleT=disY/maxHeight;

 $("#max img").css({

 left:-scaleL*($("#max img").width()-$("#max").width()),

 top:-scaleT*($("#max img").height()-$("#max").height())

 });

 });

 }

 })

　

 
8、function()不需要参数，把对象obj换成$(this)
 
9、调用函数
$(function (){
$(".oImg").fang();
});
 
10、实现结构、样式、插件分离
把style抽出来作为fang.css
 *{ margin:; padding:;}

 #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}

 #min img{

 width: 350px;

 height: 350px;

 }

 #kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:; top:; opacity:0.5; display:none;}

 #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}

 #max img{ position:absolute;}

　

 
把js抽出来作为fang.js   再引入fang.css的路径，并把它插在head里面
 $.fn.extend({

 fang:function(){

 var oSrc=$('<link rel="stylesheet" type="text/css" href="fang.css">')

 $("head").eq(0).append(oSrc);

 var $fang=$('<div id="min">'+

 '<img src="'+$(this).attr("src")+'"/>'+

     '<div id="kuai"></div>'+

     '</div>'+

 '<div id="max">'+

 '<img src="'+$(this).attr("src")+'"/>'+

 '</div>');

 $(this).before($fang);

 $(this).remove();

   $("#min").hover(function (){

 $("#kuai").show();

 $("#max").show();

 },function (){

 $("#kuai").hide();

 $("#max").hide();

 });

 $("#min").mousemove(function (event){

 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;

 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;

 var maxWidth=$("#min").width()-$("#kuai").width();

 var maxHeight=$("#min").height()-$("#kuai").height();

 if (disX<=0){

 disX=0;

 }

 else if (disX>maxWidth){

 disX=maxWidth;

 }

 if (disY<=0){

 disY=0;

 }

 else if(disY>maxHeight){

 disY=maxHeight;

 }

 $("#kuai").css({

 left:disX,

 top:disY

 });

 // 10/100

 var scaleL=disX/maxWidth;

 var scaleT=disY/maxHeight;

 $("#max img").css({

 left:-scaleL*($("#max img").width()-$("#max").width()),

 top:-scaleT*($("#max img").height()-$("#max").height())

 });

 });

 }

 })
 
11、此时已经形成一个完整的放大镜插件，用户使用插件是只需（1.）写入图片的路径（ 2.）引入插件<script type="text/javascript" src="fang.js"></script> （3.）调用方法$(function (){$(".oImg").fang();});  
一个放大镜效果就完成了，对于用户来说是不是很方便快捷，当然也可以把它收入自己的jQuery插件库，方便以后在项目中使用。
 
如：
 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <script src="jquery1.9.1.js"></script>

 <script type="text/javascript" src="fang.js"></script>

 <script>

 $(function (){

 $(".oImg").fang();

 });

 </script>

 </head>

 <body>

 <img src="max.jpg" class="oImg"/>

 </body>

 </html>

　　

 
 
 

封装jQuery插件的步骤的更多相关文章

  1. jQuery插件编写步骤详解

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  2. 封装jquery插件

    最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...

  3. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. angular封装jquery插件（组件）

    http://www.phloxblog.in/jquery-plugin-angular-js-directive-clean-html-approach/#.VaCWL9yUemJ

  5. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  6. 简易jQuery插件

    之前写过jQuery插件的笔记 如何用jQuery封装插件 我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余,那篇笔记我直到记录到后面才发现这事情很简单,想来想去还是觉得网上的一些文章把事情搞复 ...

  7. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  8. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  9. 写jQuery插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

随机推荐

  1. PHP学习笔记七【函数】

    <?php $a=13; function abc3($a) { unset($a);//[释放给定变量]表示不在abc3函数范围内,不在使用$a,后面需要全新定义 $a=45; } abc(3 ...

  2. Oracle 10G 使用UTL_SMTP发送中文电子邮件[Z]

    CREATE OR REPLACE PROCEDURE SCOTT.HTML_EMAIL( P_TO IN VARCHAR2, --收件人地址 P_SUBJECT IN VARCHAR2, --邮件主 ...

  3. ios 文字图标

    如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体文件 ...

  4. NSArray 数组操作

    /*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...

  5. C语言中命名空间的实现

    foobar.h // inclusion guard #ifndef FOOBAR_H_ #define FOOBAR_H_ //// long names //int foobar_some_fu ...

  6. Citrix 服务器虚拟化之十一 Xenserver管理vApps

    Citrix 服务器虚拟化之十一  Xenserver管理vApps vApps是把几个业务相关的虚拟机作为一个单一实体管理,把vApps中的虚拟机的称为Application.启动vApps时其中包 ...

  7. Azure上如何在Linux下挂载数据磁盘

    [原文首次发表于51cto http://cloudapps.blog.51cto.com/3136598/1653672] 在Azure上创建了虚拟机之后,我们在一些情况下会需要添加更多的数据磁盘来 ...

  8. Oracle EBS-SQL (CST-3):检查零成本交易.sql

    SELECT            '零成本交易'                                交易异常类型          ,msi.segment1               ...

  9. 从setTimeout到浏览器线程机制

    看高性能javascipt 这本书时,看到这么一句话: Putting scripts at the top of the page in this way typically leads to a ...

  10. 【Leetcode】查找二叉树中任意结点的最近公共祖先(LCA问题)

    寻找最近公共祖先,示例如下: 1 /           \ 2           3 /    \        /    \ 4    5      6    7 /    \          ...