引语：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. java菜鸟篇<四> ZTree入门篇

    今天准备入手ZTree,于是在百度上搜了搜,找到了开源网址和一些大神们的教程,于是乎下午开始了组织树(ZTree)的练习 初步完整的作品是这个样子的: 1.咱们要去这个工具的开源网里找下载的东西: ( ...

  2. javascript事件委托和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  3. git安装及使用简介

    从源代码安装 有人觉得从源码安装 Git 更实用,因为你能得到最新的版本. 二进制安装程序倾向于有一些滞后,当然近几年 Git 已经成熟,这个差异不再显著. 如果你想从源码安装 Git,需要安装 Gi ...

  4. 初学swift笔记 结构体（八）

    import Foundation /* 和类很相似 结构体 -> 封装 属性.方法 结构体是值类型 */ //定义一个LSQ类型的结构体 关键字struct struct LSQ { var ...

  5. windows内存管理方式以及优缺点

    Windows内存管理方式:页式管理,段式管理,段页式管理 页式管理 将各进程的虚拟空间(逻辑地址)划分为若干个长度相等的页,业内管理把内存空间(物理内存)按照页的大小划分为片或者页面,从而实现了离散 ...

  6. ZJUTACM（hd1259）

    ZJUTACM 点我 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  7. Masstransit开发基于消息传递的分布式应用

    使用Masstransit开发基于消息传递的分布式应用 Masstransit作为.Net平台下的一款优秀的开源产品却没有得到应有的关注,这段时间有机会阅读了Masstransit的源码,我觉得我有必 ...

  8. SQL Server 文件自动增长那些事

    方法 1. 把文件的增长设置为按照固定大小增长. 如filegrowth = 100MB; ------------------------------------------------------ ...

  9. Nginx学习笔记六Nginx的模块开发

    1.Nginx配置文件主要组成:main(全局配置)这部分的指令将影响其他所有部分.server(虚拟主机配置)这部分指令主要用于指定虚拟主机域名,IP和端口.upstream(主要为反向代理,负载均 ...

  10. Seafile 推出 “分布式文件同步技术” 打造的私有云服务

    近两年来 Dropbox 等云储存服务迅速窜红,各大巨头纷纷推出自家的云储存服务(苹果的 iCloud, 微软的 SkyDrive, Google 即将推出的 GDrive),国内也有类似的服务(金山 ...