引语：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. HtmlHelp

    @Html.Label("Label", "Label") @*渲染成<label for="Label">Label</ ...

  2. 获取设备的UUID

    很多时候需要获取设备的UUID,比如在蓝牙交互时,需要获取服务和特征的UUID,那么如何获取设备的UUID呢?请见如下代码: // // ViewController.m // 获取UUID // / ...

  3. ThreadPoolExecutor（转）

    让ThreadPoolExecutor的workQueue占满时自动阻塞submit()方法 By learnhard | 2015 年 09 月 04 日 0 Comment 转载请注明出处:htt ...

  4. C/c++几个预定义的宏：__DATE__,__TIME__,__FILE__,__LINE__

    一边情况下,C/C++编译器会内置几个宏,这些宏定义不仅可以帮助我们完成跨平台的源码编写,灵活使用也可以巧妙地帮我们输出非常有用的调试信息. ANSI C标准中有几个标准预定义宏(也是常用的): __ ...

  5. 异常处理 - PHP手册笔记

    PHP代码中所产生的异常可被throw语句抛出,并被catch语句捕获.需要进行异常处理的代码都必须放入try代码块内,每一个try至少要有一个与之对应的catch.当一个异常被抛出时,所在代码块后面 ...

  6. mysql 1054错误

    往数据库插入数据的时候报错,插入数据的是这样的 [SQL] insert into stock(code,name,b_price,s_price,num,rate,profit) values (1 ...

  7. Oracle EBS-SQL (OM-4):检查发运网络.sql

    select          msn.FROM_ORGANIZATION_CODE 开始库存组织,         msn.FROM_ORGANIZATION_NAME 开始库存名称,        ...

  8. php5.5以上的版本 开启curl

    对于php5.5以上的版本开启方法,需要libeay32.dll.ssleay32.dll.libssh2.dll三个文件拷备到C:\Windows目录下,php.ini中 扩展开启,重启apache ...

  9. (转载博文)MFC 窗口句柄获取

    句柄获取方法(获取该窗口的句柄后,即可向该窗口类类发送消息.处理程序):0.获取所在类窗口的句柄: this->m_hwnd 1.主窗口的句柄: 无论在主窗口类内,还是子窗口类内,获取主窗口句柄 ...

  10. Jenkins的安全控制

    在默认配置下,Jenkins是没有安全检查的.任何人都可以以匿名用户身份进入Jenkins,设置Jenkins和Job,执行build操作.但是,Jenkins在大多数应用中,尤其是暴露在互联网的应用 ...