原生javascript實作圖片彈窗互動效果_javascript技巧

【一】用var 宣告多個變量，比每個變數都用var快多了　　　

複製程式碼 程式碼如下:

var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
    sWindow_h = document.documentElement.clientHeight,
    t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'),'height')),
    hold_h = sWindow_h - t_h - 20,
    width = this.nImgWidth ,
    height = this.nImgHeight;　　

【二】Dom事件最佳化，在 window.onresize時，定義個定時器,setTimeout，可以防止事件頻繁地呼叫

複製程式碼 程式碼如下:

windowResize:function(){
            var _that = this,
                _timer = null;
            // 函數節流
            window.onresize = function(){
                clearTimeout(_timer);
                _timer = setTimeout(function(){
                    if( _that.tools.getId('gy_photoBox')){
                       _that.setBoxCss();
                    }

                },100);
            }       
        }

【三】圖片載入的處理函數

複製程式碼 程式碼如下:

/*
        @ src [String] 圖片的地址
        @ success [Function] 圖片載入成功的回呼函數
        @ error [Function] 圖片載入失敗的回呼函數
        */
        imgLoading:function(opt){
            var _img = new Image(),
                _that = this;
            _img.onload = function(){
                _that.nImgWidth = this.width;
                _that.nImgHeight = this.height;
                if(typeof opt.success == 'function'){
                    setTimeout(function(){
                        opt.success();
                    },300);
                }
            }
            _img.onerror = function(){
                if(typeof opt.error){
                    opt.error();
                }           
            }
            // 注意：放在onload事件下面，否則ie會出現BUG
            _img.src = opt.src;
        }

原始碼：

複製程式碼 程式碼如下:

/*
author:laoguoyong
*/
(function(){
/* -------------------------簡單的選擇器------------------- ----
    @ 參數 [string]
    ---------------------------------------
    ★-只支援以下選擇-★
    @ 支援一級選擇器：如'#id','.class','p'
    @ 支持後代選擇，如 '.class p','body span'
    @ 支援子元素選擇，如 '.class>p','body>span'
    ----------------------------------------
    @ return [Array]
    */
    var selector = function(str){
        // 定義元素陣列
        var elem = [];
        /* 私人方法
        ------------------------*/
        //返回是id的元素
        function _getId(id){
            return document.getElementById(id);
        }
        //傳回有此類名的元素-元素
        function _getByClassName(className,parent){
            var class_array = [],
                node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsBy?parent.getElementsByTagName('*'):document.getElementsBy?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                reg = new RegExp("(^|\s)" className "(\s|$)");
            for(var n=0,i=node.length;n                 if(reg.test(node[n].className)){
                    類_array.push(node[n]);
                }
            }
            return 類_array;
        }
        //一級選擇，如 '#id','p','.class'
        // return [Array]
        function _getDom(s){
            var array_elem = [];
            if (s.indexOf('#')==0){
                array_elem.push(_getId(s.slice(1)));
            }
            else if(s.indexOf('.')==0){
                array_elem = array_elem.concat(_getByClassName(s.slice(1)));
            }
            else{
                var tag = document.getElementsByTagName(s);
                for(var n=0,i=tag.length;n                     array_elem.push(tag[n]);
                }
            }
            return array_elem;
        }
        /*
        @ arry_elm [Array] : 元素數組，如 ['.demo','p'] ，選擇的是.demo下面的p元素，至於是選擇後代還是子代，請看第2個參數解釋
        @ r [String] -可選（不傳預設為選擇後代）: '>'，是選擇子代元素;
        --------------------------
        @返回[陣列]
        */
        函數 _query(array_elem,r){
            var node = array_elem,
type_name = 節點[0].match(/#/)?'id_'節點[0].slice(1):節點[0].match(/./)?'className_'節點[0].slice(1 ):'tagName_'節點[0],
                子 = _getDom(節點[1]),
                type = type_name.split('_'),
                len = document.getElementsByTagName('*').length,
                reg = new RegExp("(^|\s)" type[1] "(\s|$)");
            for(var i=0,j=child.length;i                 var par = 兒童[i].parentNode;
                for(var n=0;n                     if(par.nodeType == 9){
                        休息；
                    }
                    if(reg.test(par[type[0]])){
                        elem.push(child[i]);
                        休息;                                  }其他{
                        if(r == '>') 中斷;
                        par = par.parentNode;
                    }       
                }
            }
        }
        /* 介面
        -----------------------*/
        var elemStr = str.replace(/(^s )|(s $)/,'');
        if(document.querySelectorAll){
            var dom = document.querySelectorAll(elemStr);
            for(var n=0,len=dom.length;n                 elem.push(dom[n]);
            }
        }其他{
            var    split = /[>s]/g.exec(elemStr);
            若（分割）{
                var node = elemStr.split(split[0]);
                _query(節點,split[0]);
            }其他{
                elem = elem.concat( _getDom(elemStr) );
            }
        }
        return elem;
    }
    /* 彈跳窗功能建構子
    -----------------------*/
    function LGY_photoBox(option){
        this.opt = option;
        this.oTarget = typeof option.target == 'object'?option.target:selector(option.target);
        if(!this.oTarget) return;
        this.nLen = this.oTarget.length; //總個數
        this.aBigimg_src = []; //大圖資料數組
        this.aTitle = []; //標題資料陣列
        this.nIndex = 0; //索引
        this.nImgWidth = 0; //動態取得圖片的寬
        this.nImgHeight = 0; //動態擷取圖片的高
        this.nDelay = 0.2;
        this.intit();
    }
    LGY_photoBox.prototype = {
        intit:function(){
            var _that = this;
            this.getData();
            for(var n=0;n                 this.oTarget[n].index = n;
                this.oTarget[n].onclick = function(e){
                    _that.createCover();
                    var e = _that.tools.getEvent(e),
                        target = _that.tools.getTarget(e);
                    // 設定且沒有捲軸出現
                 為                     // 取得當時索引
                    _that.nIndex = this.index;
                    //初次判斷
                    _that.firstLoad(_that.aBigimg_src[_that.nIndex],function(){
                        //插入結構物
                        _that.createBoxDom();
                        //關閉
                        _that.tools.getId('gy_photoBox_close').onclick = function(){
                           _that.removeBox();         
                        }
                        //判斷左右按鈕顯示
                        _that.btnIsShow();   
                        // 上一张
                        _that.btnPrev();
                        // 下一张
                        _that.btnNext();
                        // 加载图片
                        _that.imgChange(_that.aBigimg_src[_that.nIndex]);
                    });
                    // 重置窗口大小
                    _that.windowResize();
                     // 键盘事件
                    _that.keyEvent();
                    //阻止跳转
                    return false;   
                }
            }
        },
        createBoxDom:function(){
            var doc = document,
                exHtml = '',
                boxHtml = doc.createElement('div');
            boxHtml.id = 'gy_photoBox';
            doc.body.appendChild(boxHtml);
            if(typeof this.opt.appendHTML == 'string'){
                exHtml = this.opt.appendHTML;
            }
            boxHtml.innerHTML = '

'+
                            '

'+
                            ''+
                            '

'+exHtml+'

'+
                            '

'+
                                'http://www.pconline.com.cn/blank.gif" />'+
                                ''+
                                '

'+
                                    ''+
                                        ''+
                                        '/'+this.nLen+
                                    ''+
                                    '

'+
                                '

'+
                            '

';
        },
        createCover:function(){
            // 建立覆蓋層
            var    doc = 文檔，且
                coverHtml = doc.createElement('div');
                coverHtml.id = 'gy_photoBox_cover';
            doc.body.appendChild(coverHtml);
            //設定覆蓋層的樣式
this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':(doc.body.scrollTop || doc.documentElement.scrollTop) (doc.documentElement.clientHeight) 'px'});
        },
        setBoxCss:function(){
            var    doc = 文檔，且
                nScrollTop = doc.body.scrollTop || doc.documentElement.scrollTop,
                nWindow_h = doc.documentElement.clientHeight,
                eBox_head_h = this.tools.getId('gy_photoBox_head').clientHeight,
                eBox = this.tools.getId('gy_photoBox'),
                eBoxPadding = 10,
                hold_h = nWindow_h - eBoxPadding - 50 - eBox_head_h,
                寬度 = this.nImgWidth ,
                高度 = this.nImgHeight;
            //alert('nWindow_h:'nWindow_h'-''eBoxPadding:'eBoxPadding'-''eBox_head_h:'eBox_head_h);
            // 圖片大小超過可見範圍，並進行縮放
            if(this.nImgHeight>hold_h){
                高度=hold_h，
                width = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
            }
            //設定框在整個頁面中位置
            this.tools.setCss(eBox,{'width':width 'px',
                                    'height':eBoxhead_h 高度 'p                                  地                                     'topBox *n             this.tools.setCss(this.tools.getId('gy_photoBox_main'),{'width':寬度'px','height':高度'px'});
            //設定覆蓋層的樣式
            this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':nScrollTop doc.documentElement.clientHeight 'px'});
        },
        刪除方塊：函數（）{
            var doc = 文檔;
            if(this.tools.getId('gy_photoBox')){
                doc.body.removeChild(this.tools.getId('gy_photoBox'));
            }
            if(this.tools.getId('gy_photoBox_cover')){
                document.body.removeChild(this.tools.getId('gy_photoBox_cover'));
            }
            this.tools.setCss(document.documentElement,{'height':'auto','overflow-y':'auto','_overflow-y':'scroll','overflow-x':'auto'}) ;
        },
        getData:function(){
            for(var n=0;n                 var src = this.oTarget[n].getAttribute('href'),
                    title = this.oTarget[n].getAttribute('title');
                this.aBigimg_src.push(src);
                if(!title) 標題 = '';
                this.aTitle.push(標題);
            }
        },
        btnIsShow:function(){
            this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'block'});
            this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'block'});
            if(this.nIndex == 0) this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'none'});
            if(this.nIndex == (this.nLen-1)) this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'none'});
        },
        imgChange:function(){
            var _that =這個，
                _src = this.aBigimg_src[this.nIndex],
                eLoadingTips = this.tools.getId('gy_photoBox_img_loading'),
                eImg = this.tools.getId('gy_photoBox_img'),
                eTitle = this.tools.getId('gy_photoBox_title'),
                eInfor = this.tools.getId('gy_photoBox_infor');
            // 顯示loading圖片
            this.tools.setCss(eLoadingTips,{'display':'block'});
            this.tools.setCss(eInfor,{'display':'none'});
            // 判斷左右按鈕顯示
            this.btnIsShow();
            // 圖片載入處理
            this.imgLoading({
                'src':_src,
                '成功':function(){
                    _that.tools.setCss(eLoadingTips,{'display':'none'});
                    _that.tools.setCss(eInfor,{'display':'block'});
                    // 設定真實圖片路徑，標題，目前頁碼
                    eImg.src = _src;
                    eTitle.innerHTML = _that.aTitle[_that.nIndex];
                    _that.tools.getId('gy_photoBox_index').innerHTML = (_that.nIndex 1);
                    // 設定樣式
                    _that.setBoxCss();
                    // 彈窗呈現
                    _that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});
);
                    if(_that.tools.getId('gy_photoBox_firstLoad')){
                                     document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));
);                     }
                    // 每次切換執行的回呼函數
                    if(typeof _that.opt.onChange == 'function'){
                                     _that.opt.onChange({'src':_src,'index':_that.nIndex,'title":_.aTitle*                     }
                },
                'error':function(){
                    setTimeout(function(){
                        _that.tools.setCss(eLoadingTips,{'display':'none'});
                    },200);
                    eImg.src = 'gyPhotoBox/error.png';
                    eTitle.innerHTML = '暫時相關圖片';
                    _that.nImgWidth = 400;
                    _that.nImgHeight = 300;
                    _that.setBoxCss();
                    _that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});
                    if(_that.tools.getId('gy_photoBox_firstLoad')){
                                     document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));
);                     }
                }
            });
        },
        btnPrev:function(){
            var _that = this;
            this.tools.getId('gy_photoBox_prev').onclick = function(){
                _that.nIndex--;
                _that.imgChange();
            }
        },
        btnNext:function(){
            var _that = this;
            this.tools.getId('gy_photoBox_next').onclick = function(){
                _that.nIndex ;
                _that.imgChange();
            }
        },
        keyEvent:function(){
            var _that = this;
            document.onkeydown = function(e){
                var e = e || window.event;
                開關（e.keyCode）{
                    案例37：{
                        if(_that.nIndex != 0&&_that.tools.getId('gy_photoBox_prev')){
                            _that.nIndex--;
                            _that.imgChange();   
                        }   
                    };休息;
                    案例39：{
                        if(_that.nIndex != (_that.nLen-1)&&_that.tools.getId('gy_photoBox_next')){
                            _that.nIndex ;
                            _that.imgChange();   
                        }           
                    };休息;
                    案例27：{
                        _that.removeBox();                           
                    };休息;
                }
            }
        },
        /*
        @ src [String] 圖片的地址
        @success [函數] 圖片載入成功的回呼函數
        @error [函數] 圖片載入失敗的回呼函數
        */
        imgLoading:函數(opt){
            var _img = new Image(),
                _that = this;
            _img.onload = function(){
                _that.nImgWidth = this.width;
                _that.nImgHeight = this.height;
                if(typeof opt.success == '函數'){
                    setTimeout(function(){
                        opt.success();
                    },300);
                }
            }
            _img.onerror = function(){
                if(typeof opt.error){
                    opt.error();
                }           
            }
            //注意：放在onload事件下面，否則會出現BUG
            _img.src = opt.src;
        },
        以先載入：函數（src，回呼）{
            var _that = 這個，
                html = document.createElement('div');
                html.id = 'gy_photoBox_firstLoad';
            document.body.appendChild(html);
this.tools.setCss(this.tools.getId('gy_photoBox_firstLoad'),{'top':(document.body.scrollTop || document.documentElement.scrollTop) (document.documentElement. ;
            if(typeof 回呼 == '函數') {
                回調();
            }
        },
        視窗調整大小：函數（）{
            var _that = 這個，
                _timer = null;
            // 函數節流
            window.onresize = function(){
                清除逾時(_timer);
                _timer = setTimeout(function(){
                    if( _that.tools.getId('gy_photoBox')){
                       _that.setBoxCss();
                    }
                },100);
            }       
        },
        工具:函數(){
            返回{
                getEvent:function(e){
                    返回 e || window.event;
                },
                getTarget:function(e){
                    回傳 e.target || e.srcElement;
                },
                PreventDefault:function(e){
                    e.preventDefault?e.preventDefault():e.returnValue = false;
                },
                getId:函數(id){
                    return document.getElementById(id);
                },
                getCss:function(節點,值){
                    return node.currentStyle?node.currentStyle[value]:getCompulatedStyle(node,null)[value];
                },
                setCss:function(node,val){
                    for(var v in val){
                        節點.style.cssText = ';' v ':' val[v];
                    }
                }
            }
        }()
    }
    window.LGY_photoBox = LGY_photoBox;
})();

最終效果圖：