快捷導(dǎo)航

jquery插件制作圖片走廊 gallery

更新時(shí)間：2012年08月17日 15:29:43 作者：

本文主要內(nèi)容是講解圖片走廊-gallery的實(shí)現(xiàn)代碼，需要的朋友可以參考下

首先創(chuàng)建jquery.gallery.js的插件文件，構(gòu)建程序骨架。

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

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

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

復(fù)制代碼代碼如下:

 
<!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)在我們開始考慮如何實(shí)現(xiàn)點(diǎn)擊圖片的時(shí)候，顯示放大圖片的效果。其實(shí)我們顯示放大的圖片不是原先的圖片，而是我們clone出了一個(gè)新圖片，將他添加到頁(yè)面中并加以顯示。此外通過計(jì)算頁(yè)面高度、寬度，圖片高度、寬度，滾動(dòng)條位置，來(lái)實(shí)現(xiàn)大圖居中對(duì)齊的實(shí)現(xiàn)。下面我們看改進(jìn)后的代碼：

復(fù)制代碼代碼如下:

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

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

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