引语：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. 输出jq对象

    console.log($()); 效果截图:

  2. (转)Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds

    仰天长啸 Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds... 当启动tomcat时候出现 S ...

  3. Android 轮询之 Service + AlarmManager+Thread （转）

    android中涉及到将服务器中数据变化信息通知用户一般有两种办法,推送和轮询. 消息推送是服务端主动发消息给客户端,因为第一时间知道数据发生变化的是服务器自己,所以推送的优势是实时性高.但服务器主动 ...

  4. [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明，更倾向使用auto

    条款5 相对显式类型声明,更倾向使用auto 基础知识 auto能大大方便变量的定义,可以表示仅由编译器知道的类型. template<typename It> void dwim(It ...

  5. C++输入和输出

    本文转载:blog.csdn.net/zhanghaotian2011/article/details/8868577博客 输入和输出并不是C++语言中的正式组成成分｡C和C++本身都没有为输入和输出 ...

  6. tcl/tk demo

    环境及版本说明: OSX10.9 tclsh -> tclsh8.5 wish -> wish8.5 查看本机运行环境: which wish; 2 /usr/bin/wish which ...

  7. 痛苦的版本对齐(3) cygwin下的路径引用

    [续<痛苦的版本对齐(2) 和时间的相关性>]http://www.cnblogs.com/yvivid/p/3541142.html 初步定位,如下告警为.depend文件路径问题导致. ...

  8. 关于android socket出现at java.net.DatagramSocket java.net.BindException at libcore.io.IoBridge.bind(IoBridge.java:89)等waring

    经查,是socket地址重复使用的原因,将代码做如下改变即可. ctlClient = new DatagramSocket(TRANSCTLPORT); ctlClient = new Datagr ...

  9. ORA-01653：表无法通过64（在表空间USERS中）扩展

    问题描述:oracle插入数据时显示ORA-01653 表无法通过64(在表空间USERS中)扩展 原因:  oracle  表空间满了,需要扩展 截图: 解决方法: 1.首先查下表空间 select ...

  10. 【STM32】用DMA实现多路ADC通道数据采集

    今天尝试了下STM32的ADC采样,并利用DMA实现采样数据的直接搬运存储,这样就不用CPU去参与操作了. 找了不少例子参考,ADC和DMA的设置了解了个大概,并直接利用开发板来做一些实验来验证相关的 ...