鄙人最新作JS自动适应的图片弹窗

/************************************自动适应的图片弹窗*********************************/ 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['width']=_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', times:250, lock:true, content:'', shadow:true, position:'center', displayCallBack:function(){ $('body').append('<img id="loading" src="/template/27/img/loading.gif"/>'); $('img[id=loading]').css('z-index',110000).css({position:'absolute',left:$(window).scrollLeft()+($(window).width())/2-($('img[id=loading]').width())/2-22,top:$(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.οnlοad=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; var newWH=autoImg(argcs);//获得缩略后的图片宽和高 /************图片预加载，重新调整窗口大小及位置************/ $('#'+winImg.ID).css({width:newWH['width'],height:newWH['height'],top:parseInt($(document).scrollTop())+parseInt(($(window).height()-newWH['height'])/2),left:$(document).scrollLeft()+parseInt(winWidth/2)-parseInt(newWH['width']/2)}); $('#'+winImg.ID).html('<img src="'+img.src+'" width="'+newWH['width']+'" height="'+newWH['height']+'"/>'); /************图片预加载，重新调整窗口大小及位置**************/ $('#'+winImg.ID+'_bg').css('cursor','pointer').click(function(){ winImg.kill(); }); }; /*************************图片加载完成之后***************************/ }, unDisplayCallBack:function(){ }, killCallBack:function(){ } }); winImg.dispaly(); }

popBox代码

// JavaScript Document //若使用移动功能，请先导入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']; } /******************获得设置值********************/ /**settings['shadow']!=' ' && settings['shadow']!=undefined*/ 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('here'); _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(){//渲染背景 var _winBgZindex=_geWinBgZindex(); //alert($(document).height()); $('body').append('<div id="'+_this.ID+'_bg"></div>');//在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('<div id="'+_this.ID+'"></div>'); _renderContent(_content);//渲染弹窗主体 _initWin();//初始化窗体 } var _initWin=function(){//初始化窗体 var _winZindex=_getWinZindex(); var _transHeight=0; if(_height=='auto'){ _transHeight='auto'; }else{ _transHeight=parseInt(_height)+'px'; } $('#'+_this.ID).css({width:parseInt(_width)+'px',height:_transHeight,position:'absolute',opticity:1.0,background:_bgColor}).css('z-index',_winZindex); if(_lock==false){ if(_moveHandle!==undefined&&_moveHandle!==false&&_moveHandle!==' '){ $('#'+_this.ID).children(_moveHandle).css('cursor','move'); //alert(_moveHandle); //alert($('#'+_this.ID).children(_moveHandle).html()); } } _locationWin();//为窗体定位 } var _locationWin=function(){/*为窗体定位topLeft,topCenter,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/ var _windowHeight=parseInt($(window).height()); var _windowWidth=parseInt($(window).width()); //alert(_windowWidth+_height); var _left=(_windowWidth-parseInt(_width))/2; var _top=parseInt($(document).scrollTop())+parseInt(($(window).height()-$('#'+_this.ID).height())/2); $('#'+_this.ID).css({top:_top+'px',left:_left+'px'}); } var _renderContent=function(content){//渲染弹窗主体 $('#'+_this.ID).append(content); } var bindEvent=function(){//绑定事件 if(_this.status!=='kill'&&_this.status!=='init'){ if(_closeButton!==undefined&&_closeButton!==' '&&_closeButton!==false){ $('#'+_this.ID+' '+_closeButton).css('cursor','pointer').live('click',function(e){ _this.unDisplay(); }); }//若设置了关闭(close)按钮 if(_killButton!==undefined&&_killButton!==' '&&_killButton!==false){ $('#'+_this.ID+' '+_killButton).css('cursor','pointer').live('click',function(e){ _this.kill(); }); }//若设置了杀死(kill)按钮 } if(_lock==false){ $('#'+_this.ID).draggable({cancel:''}); } } /*********************本类私有函数*****************/ /**********************本类公有函数******************/ this.status='init';//当前状态init->初始化状态,display->display状态,undisplay->undisplay状态,kill->kill状态 this.ID=''; var _ID=settings['ID']; if(_ID==' '||(typeof _ID)==undefined){ throw new Error('ID不能为空'); }else{ this.ID='popBox_'+_ID; } this.display=function(){//显示函数,如果状态是init或者kill重新渲染页面 //alert(_this.status); if(_this.status=='init'||_this.status=='kill'){ _creatWin();//创建窗体 //$('#'+_this.ID).css('height',_domHeight); if(_shadow==true){//渲染遮罩 /*alert(_shadow);*/ _renderBg(); } _this.status='display'; _displayCallBack(); }else{ $('#'+_this.ID).fadeIn(_times); if(_shadow==true){ $('#'+_this.ID+'_bg').fadeIn(_times); } _this.status='display'; } //alert(typeof _displayCallBack); //alert(_this.status); bindEvent(); } this.kill=function(){//彻底移除 //alert(_this.status); //alert(_this.status); if(_this.status=='kill'||_this.status=='init'){ //alert(_this.status); throw new Error('非法操作，当前状态不允许kill'); } if(_beforeKillCallBack!=undefined){ _beforeKillCallBack(); } $('#'+_this.ID).remove(); if(_shadow==true){ $('#'+_this.ID+'_bg').remove(); } _this.status='kill'; if(_killCallBack!=undefined){ _killCallBack(); } } this.unDisplay=function(){//隐藏函数 if(_this.status=='init'||_this.status=='kill'){ throw new Error('非法操作，当前状态不允许undisplay'); } if(_unDisplayCallBack!=undefined){ _unDisplayCallBack(); } $('#'+_this.ID).fadeOut(_times); $('#'+_this.ID+'_bg').fadeOut(_times); _this.status='undisplay'; } /**********************本类公有函数******************/ }//popBox网页弹窗 var errorBox=function(errorMsg){ //alert(typeof errorBox); //alert(errorBox.length); var errorObj=new popBox({ ID:'errorObj', bgColor:'#FFF', width:300, moveHandle:false, closeButton:false, height:'auto', times:200, lock:true, content:$('#errorBoxContent').html(), shadow:true, position:'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(); }); }, unDisplayCallBack:function(){ throw new Error('错误不可以关闭，只可以Kill');//错误方法只能Kill，不能关闭 }, killCallBack:function(){ //errorBox=null; } }); errorObj.dispaly(); }//错误弹窗