封装jQuery插件的步骤

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

附效果文件：下载

1、导入素材，已经封装成jQ版的放大镜

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{ margin:0; padding:0;}
 8  
 9 #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}
10 #kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:0; top:0; opacity:0.5; display:none;}
11  
12 #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}
13 #max img{ position:absolute;}
14 </style>
15 <script src="jquery1.9.1.js"></script>
16 <script>
17 $(function (){
18  
19 $("#min").hover(function (){
20  
21 $("#kuai").show();
22 $("#max").show();
23  
24 },function (){
25 $("#kuai").hide();
26 $("#max").hide();
27 });
28 $("#min").mousemove(function (event){
29  
30 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
31 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;
32  
33 var maxWidth=$("#min").width()-$("#kuai").width();
34  
35 var maxHeight=$("#min").height()-$("#kuai").height();
36 if (disX<=0){
37 disX=0;
38 }
39 else if (disX>maxWidth){
40 disX=maxWidth;
41 }
42 if (disY<=0){
43 disY=0;
44 }
45 else if(disY>maxHeight){
46  
47 disY=maxHeight;
48 }
49  
50 $("#kuai").css({
51 left:disX,
52 top:disY
53 });
54 var scaleL=disX/maxWidth;
55 var scaleT=disY/maxHeight;
56 $("#max img").css({
57 left:-scaleL*($("#max img").width()-$("#max").width()),
58 top:-scaleT*($("#max img").height()-$("#max").height())
59 });
60 });
61 });
62 </script>
63 </head>
64 <body>
65 <div id="min">
66 <img src="min.jpg"/>
67     <div id="kuai"></div>
68 </div>
69 <div id="max">
70 <img src="max.jpg"/>
71 </div>
72 </body>
73 </html>

View Code

2、在加载时动态创建结构

1 var $fang=$('<div id="min">
2 <img src="max.jpg"/>
3     <div id="kuai"></div>
4 </div>
5 <div id="max">
6 <img src="max.jpg"/>
7 </div>');

View Code

3、图片地址换成用户的地址

1 var $fang=$('<div id="min">'+
2 '<img src="'+$(".oImg").attr("src")+'"/>'+
3     '<div id="kuai"></div>'+
4     '</div>'+
5 '<div id="max">'+
6 '<img src="'+$(".oImg").attr("src")+'"/>'+
7 '</div>');

View Code

4、把创建的结构插到并图片前面

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

View Code

5、把用户定义的大图删除

$(".oImg").remove();

6、函数化，把对象作为参数obj传进去

 1 <script>
 2 function fang(obj){
 3 var $fang=$('<div id="min">'+
 4 '<img src="'+obj.attr("src")+'"/>'+
 5     '<div id="kuai"></div>'+
 6     '</div>'+
 7 '<div id="max">'+
 8 '<img src="'+obj.attr("src")+'"/>'+
 9 '</div>');
10 obj.before($fang);
11 obj.remove();
12   $("#min").hover(function (){
13 $("#kuai").show();
14 $("#max").show();
15  
16 },function (){
17 $("#kuai").hide();
18 $("#max").hide();
19 });
20 $("#min").mousemove(function (event){
21  
22 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
23 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;
24  
25 var maxWidth=$("#min").width()-$("#kuai").width();
26  
27 var maxHeight=$("#min").height()-$("#kuai").height();
28 if (disX<=0){
29 disX=0;
30 }
31 else if (disX>maxWidth){
32 disX=maxWidth;
33 }
34 if (disY<=0){
35 disY=0;
36 }
37 else if(disY>maxHeight){
38  
39 disY=maxHeight;
40 }
41  
42 $("#kuai").css({
43 left:disX,
44 top:disY
45 });
46  
47 // 10/100
48 var scaleL=disX/maxWidth;
49 var scaleT=disY/maxHeight;
50  
51 $("#max img").css({
52 left:-scaleL*($("#max img").width()-$("#max").width()),
53 top:-scaleT*($("#max img").height()-$("#max").height())
54 });
55 });
56 }
57 $(function (){
58 fang($(".oImg"));
59 });
60 </script>

View Code

7.插件化

 1 $.fn.extend({
 2 fang:function(){
 3 var $fang=$('<div id="min">'+
 4 '<img src="'+obj.attr("src")+'"/>'+
 5     '<div id="kuai"></div>'+
 6     '</div>'+
 7 '<div id="max">'+
 8 '<img src="'+obj.attr("src")+'"/>'+
 9 '</div>');
10 obj.before($fang);
11 obj.remove();
12   $("#min").hover(function (){
13  
14 $("#kuai").show();
15 $("#max").show();
16  
17 },function (){
18 $("#kuai").hide();
19 $("#max").hide();
20 });
21 $("#min").mousemove(function (event){
22  
23 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
24 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;
25  
26 var maxWidth=$("#min").width()-$("#kuai").width();
27  
28 var maxHeight=$("#min").height()-$("#kuai").height();
29 if (disX<=0){
30 disX=0;
31 }
32 else if (disX>maxWidth){
33 disX=maxWidth;
34 }
35 if (disY<=0){
36 disY=0;
37 }
38 else if(disY>maxHeight){
39  
40 disY=maxHeight;
41 }
42  
43 $("#kuai").css({
44 left:disX,
45 top:disY
46 });
47  
48 // 10/100
49 var scaleL=disX/maxWidth;
50 var scaleT=disY/maxHeight;
51  
52 $("#max img").css({
53 left:-scaleL*($("#max img").width()-$("#max").width()),
54 top:-scaleT*($("#max img").height()-$("#max").height())
55 });
56 });
57 }
58 })

View Code

8、function()不需要参数，把对象obj换成$(this)

9、调用函数

$(function (){

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

});

10、实现结构、样式、插件分离

把style抽出来作为fang.css

 1 *{ margin:0; padding:0;}
 2  
 3 #min{ height:350px; width:350px; border:1px solid #ccc; position:relative; top:20px; left:20px; cursor:move;}
 4 #min img{
 5 width: 350px;
 6 height: 350px;
 7 }
 8 #kuai{ height:175px; width:175px; background:#FC3; position:absolute; left:0; top:0; opacity:0.5; display:none;}
 9  
10 #max{ width:400px; height:400px; border:1px solid #ccc; position:absolute; left:400px; top:20px; overflow:hidden; display:none}
11 #max img{ position:absolute;}

View Code

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

 1 $.fn.extend({
 2 fang:function(){
 3 var oSrc=$('<link rel="stylesheet" type="text/css" href="fang.css">')
 4 $("head").eq(0).append(oSrc);
 5 var $fang=$('<div id="min">'+
 6 '<img src="'+$(this).attr("src")+'"/>'+
 7     '<div id="kuai"></div>'+
 8     '</div>'+
 9 '<div id="max">'+
10 '<img src="'+$(this).attr("src")+'"/>'+
11 '</div>');
12 $(this).before($fang);
13 $(this).remove();
14   $("#min").hover(function (){
15  
16 $("#kuai").show();
17 $("#max").show();
18  
19 },function (){
20 $("#kuai").hide();
21 $("#max").hide();
22 });
23 $("#min").mousemove(function (event){
24  
25 var disX=event.pageX-$("#min").offset().left-$("#kuai").width()/2;
26 var disY=event.pageY-$("#min").offset().top-$("#kuai").height()/2;
27  
28 var maxWidth=$("#min").width()-$("#kuai").width();
29  
30 var maxHeight=$("#min").height()-$("#kuai").height();
31 if (disX<=0){
32 disX=0;
33 }
34 else if (disX>maxWidth){
35 disX=maxWidth;
36 }
37 if (disY<=0){
38 disY=0;
39 }
40 else if(disY>maxHeight){
41  
42 disY=maxHeight;
43 }
44  
45 $("#kuai").css({
46 left:disX,
47 top:disY
48 });
49  
50 // 10/100
51 var scaleL=disX/maxWidth;
52 var scaleT=disY/maxHeight;
53  
54 $("#max img").css({
55 left:-scaleL*($("#max img").width()-$("#max").width()),
56 top:-scaleT*($("#max img").height()-$("#max").height())
57 });
58 });
59 }
60 })

View Code

11、此时已经形成一个完整的放大镜插件，用户使用插件是只需（1.）写入图片的路径（ 2.）引入插件<script type="text/javascript" src="fang.js"></script> （3.）调用方法$(function (){$(".oImg").fang();});

一个放大镜效果就完成了，对于用户来说是不是很方便快捷，当然也可以把它收入自己的jQuery插件库，方便以后在项目中使用。

如：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <script src="jquery1.9.1.js"></script>
 7 <script type="text/javascript" src="fang.js"></script>
 8 <script>
 9 $(function (){
10 $(".oImg").fang();
11 });
12 </script>
13 </head>
14 <body>
15 <img src="max.jpg" class="oImg"/>
16 </body>
17 </html>

View Code