 
(function ($) { 
　　$.fn.gallery = function () { 
　　　　return this.each(function () { 
　　　　　　var self = $(this); 
　　　　　　self.click(function () { 

　　　　　　}); 
　　　　}); 
　　} 
})(jQuery); 

　　創(chuàng)建html文件，使用我們創(chuàng)建的插件。

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script> 
<script type="text/javascript" src="Scripts/jquery.gallery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('img').gallery(); 
}); 
</script> 
</head> 
<body> 
<img src="Images/orderedList1.png" alt="" /> 
<img src="Images/orderedList2.png" alt="" /> 
<img src="Images/orderedList3.png" alt="" /> 
</body> 
</html>　　 

現(xiàn)在我們開始考慮如何實現(xiàn)點擊圖片的時候，顯示放大圖片的效果。其實我們顯示放大的圖片不是原先的圖片，而是我們clone出了一個新圖片，將他添加到頁面中并加以顯示。此外通過計算頁面高度、寬度，圖片高度、寬度，滾動條位置，來實現(xiàn)大圖居中對齊的實現(xiàn)。下面我們看改進后的代碼：

復制代碼代碼如下:

 
(function ($) { 
$.fn.gallery = function () { 
return this.each(function () { 
//將this變量保存到self，目的是為了避免程序錯誤 
//至于原因，上章簡單提到this在函數(shù)上下中中代表的對象不同 
var self = $(this); 
//統(tǒng)一將小圖的高度設置成100（根據(jù)個人需要可以調(diào)整，或者提供options選項） 
self.height(100); 

//添加click事件 
self.click(function () { 
//移除id為myImgGallery的對象，其實這個對象就是大圖對象 
//每次點擊的時候，都要移除上一次點擊時產(chǎn)生的大圖 
$('#myImgGallery').remove(); 

self.clone() //jquery的clone方法，clone圖片 
.attr('id', 'myImgGallery')//設置id為myImgGallery 
.height($(window).height() / 2)//將圖片高度設置為頁面可用區(qū)域高度的一半（根據(jù)自己的需要也可以設置成其他值） 
.css({ 
position: 'absolute' 
}) 
.prependTo('body')//將大圖添加到body對象中 
//使用自己創(chuàng)建的center插件，實現(xiàn)圖片居中 
//注意，一定要將clone的對象添加到body后才能調(diào)用center方法，否則clone對象的width和height都為0 
.center() 
.click(function () {//添加大圖的click事件 
$(this).remove(); //點擊大圖時，刪除本身 
}); 
}); 
}); 
}; 
$.fn.center = function () { 
return this.each(function () { 
$(this).css({ 
//設置絕對定位，這樣他就會浮動在最上層（必要的情況下可以設置zindex屬性） 
position: 'absolute', 
//設置垂直居中對齊 
top: ($(window).height() - $(this).height()) / 2 + $(window).scrollTop() + 'px', 
//設置水平居中對齊 
left: ($(window).width() - $(this).width()) / 2 + $(window).scrollLeft() + 'px' 
}); 
}); 
}; 
})(jQuery); 