首頁 >web前端 >js教程 >jquery外掛製作 圖片走廊 gallery_jquery

jquery外掛製作 圖片走廊 gallery_jquery

WBOY
WBOY原創
2016-05-16 17:50:371388瀏覽

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

複製程式碼 程式碼如下:

(function ($) {


(function ($) {


(function ($) {


(function ($) { $.fn.gallery = function () {
    return this.each(function () {
      var self = $(this); });
    });
  }
複製程式碼


程式碼如下:














   現在我們開始考慮如何實現點擊圖片的時候,顯示放大圖片的效果。其實我們顯示放大的圖片不是原先的圖片,而是我們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
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn