首先創建jquery.gallery.js的插件文件，構建程序骨架。
. 代碼如下:
(function ($) {
$.fn.gallery = function () {
return this.each(function () {
var self = $(this);
self.click(function () {
});
});
}
})(jQuery);
創建html文件，使用我們創建的插件。
. 代碼如下:
<!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>
現在我們開始考慮如何實現點擊圖片的時候，顯示放大圖片的效果。其實我們顯示放大的圖片不是原先的圖片，而是我們clone出了一個新圖片，將他添加到頁面中並加以顯示。此外通過計算頁面高度、寬度，圖片高度、寬度，滾動條位置，來實現大圖居中對齊的實現。下面我們看改進後的代碼：
. 代碼如下:
(function ($) {
$.fn.gallery = function () {
return this.each(function () {
//將this變量保存到self，目的是為了避免程序錯誤
//至於原因，上章簡單提到this在函數上下中中代表的對象不同
var self = $(this);
//統一將小圖的高度設置成100（根據個人需要可以調整，或者提供options選項）
self.height(100);
//添加click事件
self.click(function () {
//移除id為myImgGallery的對象，其實這個對象就是大圖對象
//每次點擊的時候，都要移除上一次點擊時產生的大圖
$('#myImgGallery').remove();
self.clone() //jquery的clone方法，clone圖片
.attr('id', 'myImgGallery')//設置id為myImgGallery
.height($(window).height() / 2)//將圖片高度設置為頁面可用區域高度的一半（根據自己的需要也可以設置成其他值）
.css({
position: 'absolute'
})
.prependTo('body')//將大圖添加到body對象中
//使用自己創建的center插件，實現圖片居中
//注意，一定要將clone的對象添加到body後才能調用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);
好了，今天的內容到此結束。
demo下載地址：jQuery.plugin.gallery