jquery外掛製作 圖片走廊 gallery_jquery

首先創建jquery.gallery.js的插件文件，建構程式骨架。

複製程式碼 程式碼如下:

(function ($) {


(function ($) {


(function ($) {


(function ($) { $.fn.gallery = function () {
　　　　return this.each(function () {

　　　　　　var self = $(this); });
　　　　});
　　}

})(jQuery); 　　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