JS圖片燈箱(lightBox)效果基本原理和demo

龍恩0707發表於2014-01-27

到年底了，專案不怎麼忙，所以有空特地研究了下KISSY中原始碼JS燈箱效果，感覺程式碼比較簡單，所以就按照他們的思路依賴於Jquery框架也封裝了一個，特地分享給大家，以前經常看到網上很多這樣的外掛，感覺很多人很牛逼的樣子，這樣的效果也能做出來，碰巧今天自己也能研究出來一個，程式碼也不多，就300多行程式碼，嘿嘿！如果寫的不夠好，或者還不夠的，希望大家多多指教！或者多多發表意見，那些需要值得改進的地方！共同學習！

基本原理

點選縮圖浮層顯示大圖，可點選鍵盤←、→鍵切換圖片，也可以滑鼠點選左右箭頭切換。按下鍵盤Esc鍵和點選關閉按鈕效果一致。

配置項如下：

container	'#container', container 容器標識，父級盒子ID
targetCls	'.J_lightbox', targetCls 元素選擇器，需要彈出的圖片連結dom節點
layer	'#lightbox', 浮層模版選擇器
closebtn	'.closebtn', 關閉浮層的X按鈕
prev	'.prevbtn', 上一張觸發器
next	'.nextbtn', 下一張觸發器
easing	'linear' jquery 動畫函式預設為 'linear' 或者 'swing' 或者jquery自帶的動畫效果

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程式碼如下：

/**
 * JS燈箱效果
 * @time 2014-1-24
 * @author tugenhua
 */

 function LightBox(options) {
    
     /**
      * 引數說明
      * @container 容器標識，父級盒子ID
      * @targetCls 元素選擇器，需要彈出的圖片連結dom節點
      * @layer 浮層模版選擇器
      * @closebtn 關閉浮層的X按鈕
      * @prev 上一張觸發器
      * @next 下一張觸發器
      * @easing jquery 動畫函式 預設為 'linear' 或者 'swing' 或者jquery自帶的動畫效果
      */
    this.config = {
        container          :   '#container',
        targetCls          :   '.J_lightbox',
        layer              :   '#lightbox',
        closebtn           :   '.closebtn',
        prev               :   '.prevbtn',
        next               :   '.nextbtn',
        easing             :   'linear'    
    };

    this.cache = {
        isShow        :  false, 
        currentImg    :  null
    };
    // 初始化
    this.init(options);
 }

 LightBox.prototype = {

    constructor: LightBox,
    
    init: function(options) {
        this.config = $.extend(this.config, options || {});
        var self = this,
            _config = self.config;
        
        // 點選
        self._click();
    },
    /*
     * 獲取元素的位置
     * @method _getPos()
     * @param node 元素的節點
     * {private}
     */
    _getPos: function(node) {
        var pos = {},
            xy = $(node)[0].getBoundingClientRect(),
            sl = $(window).scrollLeft(),
            st = $(window).scrollTop();
        pos.x = xy.left + sl;
        pos.y = xy.top + st;
        return pos;
    },
    /*
     * 點選頁面上圖片
     * @method _click();
     * {private}
     */
    _click: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.targetCls,_config.container).each(function(index,item) {
            $(item).unbind('click');
            $(item).bind('click',function(e){
                e.preventDefault();
                _cache.currentImg = $(_config.targetCls).index($(this));

                // 顯示loading載入效果
                self._showLoadMask();
                
                // 載入內容
                self._onLoad($(this).attr('href'),this);
            });

            // 滑鼠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');
            });

            // 點選上一頁按鈕
            $(_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');
            });

            // 點選關閉按鈕X 隱藏lightBox圖片
            $(_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;
                });
            });

            /*
             * 鍵盤左右鍵觸發 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();
                    }
                }
            });
            
            // 視窗縮放事件
            $(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]);
                }
            });
        });
    },
    /*
     * 顯示loading載入效果
     * @method _showLoadMask()
     * {private}
     */
    _showLoadMask: function(){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var maskLayer = $('#maskLayer'),
            left,
            top;
        // 有的話 不需要建立 否則的話 建立load圖示層
        if(maskLayer.length > 0) {
            left = ($(window).width() - $(maskLayer).width()) / 2 + $(window).scrollLeft(),
            top = ($(window).height() - $(maskLayer).height()) / 2 + $(window).scrollTop();
            $(maskLayer).css({'left':left + 'px','top':top + 'px','display':'block'});
        }else {
            var mask = $("<div id='maskLayer' class='maskLayer'></div>");
            // 載入loading圖示
            $(mask).html("<img src='http://img02.taobaocdn.com/tps/i2/T115PmXipeXXaY1rfd-32-32.gif'>");
            $('body').append(mask);
            maskLayer = $('#maskLayer');
            left = ($(window).width() - $(maskLayer).width()) / 2 + $(window).scrollLeft(),
            top = ($(window).height() - $(maskLayer).height()) / 2 + $(window).scrollTop();
            $(maskLayer).css({'left':left + 'px','top':top + 'px','display':'block'});
        }
    },
    /*
     * 載入大圖片
     * @method _onLoad()
     * @param {href,this} 當前的大圖片的src 當前點選圖片元素節點
     */
    _onLoad: function(src,$this){
        var self = this,
            _config = self.config,
            _cache = self.cache;

        // 建立img
        var img = new Image(),
            isIE = navigator.userAgent.match(/MSIE/)!= null;

        if(!isIE) {
            img.onload = function() {
                if(img.complete == true) {
                        
                    // 圖片定位居中
                    self._getCenter(img,$this);
                }
            }
        }else {
            /*
             * ie6,7,8 
             * readyState:complete 動態建立的 IMG 標記可以觸發 onreadystatechange 事件
             */
            img.onreadystatechange = function() {
                
                if(img.readyState == 'loaded' || img.readyState == 'complete') {
                        
                    // 圖片定位居中
                    self._getCenter(img,$this);
                }
            }
        }
        img.src = src;
    },
    /*
     * 層居中對齊
     * @method _getCenter();
     * @param {img,$this} 動態建立img 當前點選圖片元素節點
     */
    _getCenter: function(img,$this) {
        
        var self = this,
            _config = self.config,
            _cache = self.cache;
        // 先隱藏load圖示
        $("#maskLayer") && $("#maskLayer").css('display','none');
        var img_w = img.width,
            img_h = img.height,
            win_w = $(window).width(),
            win_h = $(window).height(),
            left = $(window).scrollLeft(),
            top = $(window).scrollTop();
        img_w = (img_w > win_w - 20) ? win_w - 20 : img_w;
        var layer_left = (win_w - img_w)/2 + left,
            layer_top = (win_h - img_h)/2 + top;
        var position = self._getPos($this),
            layer_width = $($this).width(),
            layer_height = $($this).height();
        var layer_img = $('img',_config.layer);
        $(layer_img).attr('src','http://m2.img.papaapp.com/farm5/d/2014/0126/14/E6520E9D47F0FE8AB04B93BE922C6707_ORIG_1_1.gif');
        $(layer_img).css({'width':img_w,'height':img_h});
        $(layer_img).fadeOut(0.3);

        layer_left = layer_left < 0 ? 0 : layer_left;
        layer_top = layer_top < 0 ? 0 : layer_top;
        if(!_cache.isShow) {
            $(_config.layer).css({
                'width'     : layer_width,
                'height'    : layer_height,
                'left'      : position.x,
                'top'       : position.y,
                'display'   : 'block'
            });
            _cache.isShow = true;
            if(self.isrun && $(self.isrun).is(":animated")) {
                $(self.isrun).stop();
            }
            self.isrun = $(_config.layer).animate({
                'left'     :  layer_left,
                'top'      :  layer_top,
                'width'    :  img_w,
                'height'   :  img_h,
                "borderWidth": "10px"
             }, 0.3,_config.easing,function(){
                $(layer_img).attr('src',$(img).attr('src'));
                $(layer_img).fadeIn(0.3);
            });
        }else {
            if(self.isrun && $(self.isrun).is(":animated")) {
                $(self.isrun).stop();
            }
            self.isrun = $(_config.layer).animate({
                'left'     :  layer_left,
                'top'      :  layer_top,
                'width'    :  img_w,
                'height'   :  img_h
            }, 0.3,_config.easing,function(){
                $(layer_img).attr('src',$(img).attr('src'));
                $(layer_img).fadeIn(0.3);    
            });
        }
    }
 };

 // 初始化
 $(function(){
    new LightBox({});
 });

View Code

總結：

春節前是最後一篇部落格，嘿嘿！28號凌晨2點的火車，今天晚上動身回家了！呵呵！羨慕嫉妒恨吧！哈哈.....

demo下載

12款響應式 Lightbox（燈箱）效果外掛
2013-03-02
jQuery燈箱外掛lightBox使用方法
2024-03-30
jQuery
20款優秀 jQuery Lightbox 燈箱外掛
2014-12-27
jQuery
asp.net+js方式實現的幻燈圖片效果展示
2012-12-19
ASP.NETJS
JS實現馬賽克圖片效果
2018-08-28
JS
JS實現有點炫的圖片展示效果-圖片解體和組合
2014-07-13
JS
NodeJS卷積濾鏡處理圖片Demo
2019-03-04
NodeJS卷積
zeptojs-跑馬燈效果
2016-04-21
JS
js圖片碎片化效果程式碼例項
2017-04-13
JS
CSS聚光燈文字（無圖片）
2020-12-06
CSS
css實現文字和圖片居中效果
2017-03-09
CSS
JS圖片延遲載入分析及簡單的demo
2014-01-11
JS
JS輸入框郵箱自動提示(帶有demo和原始碼)
2013-12-10
JS原始碼
js拖動實現左右圖片對比效果
2017-04-15
JS
js圖片淡入淡出效果程式碼例項
2017-04-12
JS
馬賽克效果的JS圖片切換程式碼
2016-07-11
JS
JS實現類似圖片3D效果
2013-11-30
JS3D
JS+CSS帶數字和左右按鈕可控制切換的圖片幻燈
2012-10-01
JSCSS
百葉窗式的幻燈片切換效果原理
2016-04-12
幻燈片式圖片瀏覽器
2014-07-01
瀏覽器
如何將PPT幻燈片轉換為圖片
2016-11-21
ECMAScript對資料夾圖片幻燈片播放
2016-09-13
flex圖片居中效果
2017-02-19
Flex
Vue.js+Element-UI走馬燈圖片自適應實踐
2021-01-01
Vue.jsUI
不同瀏覽器下圖片滾動效果的js
2009-07-07
瀏覽器JS
用impress.js製作幻燈片
2014-04-26
JS
美化js系統函式alert，confirm，prompt，並實現lightbox效果
2009-07-03
JS函式
圖片上傳5-多個圖片上傳，獨立專案Demo和原始碼
2015-11-03
原始碼
display:flex 圖片居中效果
2019-07-20
Flex
JavaScript 圖片放大鏡效果
2018-11-21
JavaScript
CSS圓形圖片效果
2018-08-07
CSS
JS仿QQ空間滑鼠停在長圖片時候圖片自動上下滾動效果
2014-01-02
JS
js滑鼠移動實現圖片立體滾動效果
2017-04-07
JS
Vue-cropper 圖片裁剪的基本原理
2018-04-16
Vue
JS實現動態瀑布流及放大切換圖片效果(js案例)
2019-05-23
JS
幻燈片放映模式切換windows terminal背景圖片
2021-04-10
模式Windows
css自定義屬性和聚光燈效果
2018-03-01
CSS
【js】Redux基本原理和使用
2018-12-11
JSRedux

JS圖片燈箱(lightBox)效果基本原理和demo

相關文章