引语：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. 使用Zbar实现简单的二维码扫描

    导入ZBarSDK导入系统库 AVFoundation.framework,CoreMedia.framework,CoreVideo.framework,QuartzCore.framework,l ...

  2. Quartz2D介绍

    一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图 ...

  3. Router和History (路由控制)-backbone

    Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...

  4. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  5. XML新手入门 创建构造良好的XML(1)

    XML新手入门 创建构造良好的XML(1) 2009-03-19 09:24 Kay Whatley IBM Developerworks 我要评论(0) 字号:T | T 本文描述了构建良好的XML ...

  6. git 快速使用（本地仓库同步到远程仓库）

    学git一段时间,可惜公司用的是svn,平时少用,又忘了,总结一下,免得下次又得重新学习.得多多用才是正道! 一.  将本地的提交到网上git仓库 1.在git创建仓库                ...

  7. 利用Azure Backup备份和恢复虚拟机(2)

    虚拟机注册之后,下一步就是将他们添加为受保护的项,在菜单底部,单击"保护"按照提示选择需要保护的虚拟机     单击"下一步",在这个页面中需要选择配置虚拟机配 ...

  8. Nginx学习之一-第一个程序Hello World

    本例子实现了一个简单的hello world程序.运行效果: 虚拟机Ubuntu中: win7中chrome浏览器: 一.config文件编写 Nginx提供了一种简单的方式将第三方的模块编译到Ngi ...

  9. EasyUI 使用

    1.面板的使用 <div id="box" > <p>内容区域</p> </div> <div id="tt&quo ...

  10. 山寨QQ音乐的布局（一）

    学了两天IOS趁着还没忘光,巩固一下所学知识想做点东西,由于自己的设计能力有限,所以就山寨一下吧,说到山寨怎么能忘了腾讯呢,今天发现QQ音乐的设计风格是扁平化的,小清新风格,所以就山寨一下它吧.. 由 ...