到年底了，項目不怎么忙，所以有空特地研究了下KISSY中源碼JS燈箱效果，感覺代碼比較簡單，所以就按照他們的思路依賴于Jquery框架也封裝了一個，特地分享給大家，以前經常看到網上很多這樣的插件，感覺很多人很牛逼的樣子，這樣的效果也能做出來，碰巧今天自己也能研究出來一個，代碼也不多，就300多行代碼，嘿嘿！如果寫的不夠好，或者還不夠的，希望大家多多指教！或者多多發表意見，那些需要值得改進的地方！共同學習！
基本原理
點擊縮略圖浮層顯示大圖，可點擊鍵盤←、→鍵切換圖片，也可以鼠標點擊左右箭頭切換。按下鍵盤Esc鍵和點擊關閉按鈕效果一致。
配置項如下：
JSFiddle效果如下
代碼中需要了解的知識點如下：
1. getBoundingClientRect()方法：該方法獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置，他返回的是一個對象，即Object，該對象有是個屬 性：top，left，right，bottom；這里的top、left和css中的理解很相似，但是right，bottom和css中的理解有點不 一樣，看示意圖：
以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已經支持這個方法。所以兼容性都支持的。
2. 判斷圖片是否加載完成時 標準瀏覽器用onload觸發，IE用私有屬性onreadystatechange觸發，需要了解更深入的話 可以閱讀這篇文章： 想看我，先點擊我！ok！
代碼簡單的分析下：
1.頁面初始化時候 調用init方法，執行點擊_click()函數。如下代碼：
init:
function
(options) {
this
.config = $.extend(
this
.config, options ||
{});
var
self =
this
,
_config
=
self.config;
//
點擊
self._click();
},
2. 點擊_click()函數做了如下事情：
1. 點擊縮略圖：調用 self._showLoadMask(); // 顯示loading加載效果 就是頁面未加載或者網速慢的時候 顯示加載轉圈那種效果。
2. self._onLoad($(this).attr('href'),this); // 執行此方法加載大圖片。
3. 鼠標mouerover事件和mouseout事件觸發 如下代碼：
//
鼠標mouseover事件(移到動畫層)
$(_config.layer).mouseover(
function
(){
if
(_cache.currentImg != 0
) {
$(_config.prev).css(
'display','block'
);
}
if
(_cache.currentImg != ($(_config.targetCls).length - 1
)) {
$(_config.next).css(
'display','block'
);
}
});
//
鼠標移出 隱藏上一頁按鈕 下一頁按鈕
$(_config.layer).mouseout(
function
(){
$(_config.prev).css(
'display','none'
);
$(_config.next).css(
'display','none'
);
});
4. 點擊上一頁按鈕 或 下一頁按鈕 圖片切換做相應的操作：如下代碼：
//
點擊上一頁按鈕
$(_config.prev).unbind('click').bind('click',
function
(){
_cache.currentImg
-= 1
;
self._onLoad($($(_config.targetCls)[_cache.currentImg]).attr(
'href'
),$(_config.targetCls)[_cache.currentImg]);
if
(_cache.currentImg == 0
) {
$(_config.prev).css(
'display','none'
);
}
else
{
$(_config.prev).css(
'display','block'
);
}
$(_config.next).css(
'display','block'
);
});
//
點擊下一頁按鈕
$(_config.next).unbind('click').bind('click',
function
(){
_cache.currentImg
+= 1
;
self._onLoad($($(_config.targetCls)[_cache.currentImg]).attr(
'href'
),$(_config.targetCls)[_cache.currentImg]);
if
(_cache.currentImg == ($(_config.targetCls).length - 1
)) {
$(_config.next).css(
'display','none'
);
}
else
{
$(_config.next).css(
'display','block'
);
}
$(_config.prev).css(
'display','block'
);
});
5. 點擊關閉按鈕觸發關閉事件,代碼如下：
$(_config.closebtn).unbind('click').bind('click',function(){
var
position =
self._getPos($(_config.targetCls)[_cache.currentImg]),
width
=
$($(_config.targetCls)[_cache.currentImg]).width(),
height
=
$($(_config.targetCls)[_cache.currentImg]).height();
$(
'img',_config.layer).attr('src','http://m2.img.papaapp.com/farm5/d/2014/0126/14/E6520E9D47F0FE8AB04B93BE922C6707_ORIG_1_1.gif'
);
$(_config.layer).animate({
'left'
: position.x,
'top'
: position.y,
'width'
: width,
'height'
: height,
"borderWidth": 0
},
0.2,_config.easing,
function
(){
$(_config.layer).css(
'display','none'
);
_cache.isShow
=
false
;
});
});
6.鍵盤左右鍵除法事件代碼如下：
/*
* 鍵盤左右鍵觸發 Esc鍵碼27 鍵盤右移鍵39 左移鍵 37
*/
$(document).unbind('keydown').bind('keydown',
function
(e){
var
keyCode =
e.keyCode;
if
(_cache.isShow) {
if
(keyCode == 27
) {
$(_config.closebtn).click();
}
else
if
(keyCode == 37
) {
if
(_cache.currentImg == 0
) {
return
;
} $(
"#maskLayer").css('display','block'
);
$(_config.prev).click();
}
else
if
(keyCode == 39
) {
if
(_cache.currentImg == ($(_config.targetCls).length - 1
)) {
return
;
}
$(
"#maskLayer").css('display','block'
);
$(_config.next).click();
}
}
});
7. 窗口縮放事件 代碼如下：
//
窗口縮放事件
$(window).resize(
function
(){
if
(_cache.isShow){
if
(self.isrun && $(self.isrun).is(":animated"
)) {
$(self.isrun).stop();
}
self._onLoad($($(_config.targetCls)[_cache.currentImg]).attr(
'href'
),$(_config.targetCls)[_cache.currentImg]);
}
});
3. 下面還有幾個方法不一一解析了 有興趣的童鞋可以看看代碼，下面會提供demo下載或在看看上面Jsfiddle鏈接效果或者源碼：分別是：
_showLoadMask().顯示loading加載效果
_onLoad() 加載大圖片
_getCenter() 層居中對齊
下面是所有的JS代碼如下：
View Code
總結：
春節前是最后一篇博客，嘿嘿！28號凌晨2點的火車，今天晚上動身回家了！呵呵！羨慕嫉妒恨吧！哈哈.....
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
