JS自动适应的图片弹窗实例_javascript技巧

复制代码 代码如下:

/************************************自动适应的图片弹窗*********************************/
var autoImg=function(argcs){/*调整图片大小，等比例缩放argcs['maxHeight']=>最大高度,argcs['maxWidth']=>最大宽度,argcs['height']=>图片高度，argcs['width']=>图片宽度*/
                var _maxHeight='';
                var _maxWidth='';
                var _newSize=[];

                if(argcs['maxHeight']){
                    _maxHeight=argcs['maxHeight'];
                    }
                if(argcs['maxWidth']){
                    _maxWidth=argcs['maxWidth'];
                    }
                if(!argcs['height']){
                    throw new Error('height未指定');
                    }
                if(!argcs['width']){
                    throw new Error('width未指定');
                    }
                if(argcs['height']>argcs['width']||argcs['height']==argcs['width']){//高度不小于宽度的情况
                        if(argcs['height']>=_maxHeight){
                                _newSize['height']=_maxHeight;
                                _newSize['width']=(_maxHeight/argcs['height'])*argcs['width'];
                            }else{
                                _newSize['width']=argcs['width'];
                                _newSize['height']=argcs['height'];
                                }
                        return _newSize;
                    }
               if(argcs['width']>argcs['height']){//宽度大于高度的情况
                       if(argcs['width']>=_maxWidth){
                                _newSize[ '宽度']=_maxWidth;
                                _newSize['height']=(_maxWidth/argcs['width'])*argcs['height'];
                            }else{
                                _newSize['width']=argcs['width'];
                                _newSize['height']=argcs['height'];
                                }
                        return _newSize;
                    }               
                }

    var imgBox=function(imgSrc){            
           
           var winImg=new popBox({//图片弹窗
                ID:'imgBox',
                bgColor :'#a3c90e',
                width:906,
                moveHandle:false,
                closeButton:false,
                height:'auto',
                次：250，
                锁：true，
                内容:'',
                阴影:true,
                位置:'center',
                displayCallBack:function(){
                                       $('body').append('');                     $('img[id=loading]').css('z-index',110000); css({position:'absolute',left:$(window).scrollLeft() ($(window).width())/2-($('img[id=loading]').width())/ 2-22,顶部:$(window).scrollTop() ($(window).height()/2-($('img[id=loading]').width())/2)}）；
                    /************图片预加载，重新调整窗口大小及位置**************/
                    var img=new Image();
                    var _imgWidth=0;
                    var _imgHeight=0;
                     img.src=imgSrc;//为img对象添加地址
                                      // console.log(imgSrc);
                                        /*************************图片加载完成之后***************************/
                   img.onload=function(){
                                                $('img[id=loading]').remove();
                        _imgWidth=img.width;
                        _imgHeight=img.height;
                        var argcs=[];
                        var winWidth=$(window).width();
                        argcs['maxHeight']=750;//最大高度
                       argcs['maxWidth']=900;//最大宽度
                        argcs['height']=_imgHeight;
                        argcs['width']=_imgWidth; ('#' winImg.ID).css({宽度:newWH['宽度'],高度:newWH['高度'],top:parseInt($(document).scrollTop()) parseInt(($(window).height()-newWH['高度'])/ 2),left:$(document).scrollLeft() parseInt(winWidth/2)-parseInt(newWH['width']/2)}）；
                        $('#' winImg.ID).html('');
                        /************图片预加载，重新调整窗口大小及位置**************/

                        $('#' winImg.ID '_bg').css('光标','指针').click(function(){
winImg.kill();
                           });
                        };
                                        /*************************图片加载完成之后***************************/ 
                   },
                unDisplayCallBack:function(){

                     },
                KillCallBack:function(){
                    }
                } ）；
                winImg.dispaly();
    }

popBox代码

复制代码代码如下：

//若使用移动功能，请先导入jQuery移动UI组件
var popBox=function(settings){//弹窗函数settings=[]
        //alert(typeof settings['width']);
        //alert(settings['displayCallBack']);
        /************************本类私有变量*****************************/
        /*******************默认值*****************/
        var _shadow=true;//是否有遮罩true/false
        var _closeButton=false;//关闭按钮false/dom元素
        var _killButton=false;//kill按钮false/dom元素
        var _moveHandle=false;//拖动手柄false/dom元素
        var _width=650;//宽,
        var _bgColor='#FFF';//背景样式
        var _height='auto';//高
        var _content='没有内容';//内容
        var _position='center';/*位置topLeft,topCenter,topRight,center,bottomLeft,bottomRight,bottomCenter*/
        var _lock=true;//是否锁定
        var _times=500;//显示，隐藏的时间
        var _displayCallBack=function(){//dispaly回调函数
                alert('display');
            }
        var _unDisplayCallBack=function(){//unDispaly回调函数
                alert('unDisplay');
            }
        var _beforeKillCallBack=function(){
                alert('beforeKill');
            }//kill之前的回调函数
        var _killCallBack=function(){//kill回调函数
                alert('kill');
            }
        /*******************默认值*****************/
        if(settings['closeButton']!==undefined){
            //alert('shadow');
            _closeButton=settings['closeButton'];
            }   
        if(settings['killButton']!==undefined){
            //alert('shadow');
            _killButton=settings['killButton'];
            }
        if(settings['moveHandle']!==undefined){
            //alert('shadow');
            _moveHandle=settings['moveHandle'];
            }               
        /******************获得设置值********************/
        /**设置['阴影']！=' ' && 设置['阴影']！=未定义*/
        if(settings['shadow']!==undefined){
            //alert('shadow');
            _shadow=settings['shadow'];
            }
        if(settings['bgColor']!==undefined){
            //alert('shadow');
            _bgColor=settings['bgColor'];
            }
        if(settings['width']!==undefined){
            _width=settings['width'];
            }
        if(settings['height']!==undefined){
            _height=settings['height'];
            }
        if(settings['content']!==undefined){
            _content=settings['content'];
            }
        if(settings['position']!==undefined){
            _position=settings['position'];
            }
        if(settings['times']!==undefined){
            _times=settings['times'];
            }
        if(settings['lock']!==undefined){
            _lock=settings['lock'];
            }
        if(settings['displayCallBack']!=undefined){
            //alert('此处');
            _displayCallBack=settings['displayCallBack'];
            }       
        if(settings['unDisplayCallBack']!==undefined){
            _unDisplayCallBack=settings['unDisplayCallBack'];
            }   
        if( settings['beforeKillCallBack']!==undefined){
            _beforeKillCallBack=settings['beforeKillCallBack'];
            }
        if( settings['killCallBack']!==undefined){
            _killCallBack=settings['killCallBack'];
            }

//alert(settings['shadow']);
//alert(_shadow);
/************************本类私有变量******************************/



/*********************本类内部变量********************/
var _this=this;
var _baseZindex=10000;
var _domWidth=$(document).width();
var _domHeight=$(document).height();
/********************本类内部变量*******************/


/********************本类私有函数**********************/
var _getZindex=function(){/*获得z-index->首先遍历网页div元素ID中含有popBox的DOM,获得数量，然后本弹窗背景z-index=基数+当前数量+1,弹框z-index=基数+当前数量+2*/
                var _len=$('body').children('div').length;
                var _countDiv=0;
                var _divObj=$('body').children('div');
                var _reg=/^popBox_/;//正则表达式
                for(var i=0;i<_len;i++){
if(_reg.test(_divObj.eq(i).attr('ID'))){
_countDiv+=1;
}
}
return _countDiv;//返回已有弹框的数量
}
var _getWinZindex=function(){//获得弹窗的z-index
var _winZindex=_baseZindex+_getZindex()+2;
return _winZindex;
}
var _geWinBgZindex=function(){//获得弹窗背景的z-index
var _winBgZindex=_baseZindex+_getZindex()+1;
return _winBgZindex;
}
var _renderBg=function(){//渲染背景 www.jb51.net
var _winBgZindex=_geWinBgZindex();
//alert($(document).height());
$('body').append('

');//在body中插入一个半透明的背景
                $('#'+_this.ID+'_bg').addClass('popBox_bg').css({height:_domHeight,width:_domWidth,opcity:0}).css('z-index',_winBgZindex).fadeTo(_times,0.7);
            }
        var _creatWin=function(){//创建窗体
                $('body').append('

'); 양식 초기화
          var _winZindex=_getWinZindex();                                   ​ _transHeight='auto'; bgColor}).css('z-index',_winZindex);
if(_lock==false){
{
                    $('#' _this.ID).children(_moveHandle).css('cursor','move');                                                              //경고($( ' #' _this.ID).children(_moveHandle).html());
                                                                         | ight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/
var _windowHeight =parseInt($(window).height());
var _windowWidth =parseInt($(window).width());
                                                 seInt($ (문서).scrollTop()) parseInt(($( window).height()-$('#' _this.ID).height())/2);
                $('#' _this.ID) .css({top:_top 'px',left: _왼쪽 'px'});
                                                                                               .ID).append(content)
                             var bindevent = function () {// 绑定事件
if (_this.status! == 'kill'&& _ this.status! == 'init') {
if (_closebutton! == intfefined && _ closeButton !==' '&&_closeButton!==false){
                           $('#' _this.ID ' ' _closeButton).css('cursor','pointer').live('click',function(e){
                          _this.unDisplay()
                        });                         
                      }//若设置了关闭(close)按钮
                     if(_killButton!==undefound&&_killButton!=='&&_killButton!==false) {
                           $('#' _this.ID ' ' _killButton ).css('cursor','pointer').live('click',function(e){
                          _this.kill();
                         });                         
                     }//若设置了杀死(kill)按钮
                 }
               if(_lock==false){ >                    $('#' _this.ID).draggable({취소:'' });
                  }
            }       
        /***********************이 클래스의 개인 기능*****************/

        
        /**************************이 클래스의 공개 기능*******************/
        this.status='init';//当前状态init->初始化状态,display->display状态,undisplay->undisplay状态,kill->kill状态
        this.ID='';
        var _ID=settings['ID'];
        if(_ID==' '||(typeof _ID)==undefine){
            throw new Error('ID不能为空');
            }else{
               this.ID='popBox_' _ID;
                }
this.display=function(){//표시 함수, 상태가 init 또는 kill인 경우 페이지를 다시 렌더링합니다.
//alert(_this.status)
if(_this.status= ='init' ||_this.status=='kill'){
                                                                                   > ~ ~ > ~ > //alert(_this.status);
binEvent();
}
this.kill=function(){//완전히 제거
//alert(_this.status); //경고(_this .status);
                                                                                   > ~                           
this.unDisplay=function(){//숨겨진 함수
if(_this.status=='init'||_this.status=='kill'){
throw new Error('잘못된 연산 , 현재 상태에서는 표시 취소가 허용되지 않습니다.')       🎜>               $('#' _this.ID).fadeOut( _times)
$('#' _this.ID '_bg').fadeOut(_times) );
_this.status='표시 해제'; 🎝>*/

                                                                                                                                   길이); ,
closeButton :false,
높이:'자동',
회:200,
잠금:true,
내용:$('#errorBoxContent').html(),
그림자:true,
위치:' center',
displayCallBack:function(){
$('#' errorObj.ID).find('.errorMessage').html()
$('# ' errorObj.ID). find('.errorMessage').html(errorMsg);
                                 $('#' errorObj.ID).find('.errorConfirm input').click(function(){
//alert('here ');
                   errorObj.kill();                                DisplayCallBack:function(){
                           > >>                  🎜>         })
errorObj.dispaly()
}//오류 팝업 창