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

这篇文章介绍了JS自动适应的图片弹窗实例代码有需要的朋友可以参考一下复制代码 代码如下:
/************************************自动适应的图片弹窗*********************************/
var   autoImg=function(argcs){/*调整图片大小等比例缩放argcs[maxHeight]=>最大高 度argcs[maxWidth]=>最大宽度argcs[height]=>图片高度argcs[width]=& gt;图片宽度*/
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:#ace
width:
moveHandle:false
closeButton:false
height:auto
times:
lock:true
content:
shadow:true
position:center
displayCallBack:function(){
$(body)append(<img id="loading" src="/template//img/loadinggif"/>);
$(img[id=loading])css(zindex)css({position:absoluteleft:$(window)scrollLeft()+($(window)width())/($(img[id=loading])width())/top:$(window)scrollTop()+($(window)height()/($(img[id=loading])width())/)});  
/************图片预加载重新调整窗口大小及位置**************/
var img=new Image();
var _imgWidth=;
var _imgHeight=;
imgsrc=imgSrc;//为img对象添加地址
// consolelog(imgSrc);
/*************************图片加载完成之后***************************/
imgonload=function(){
$(img[id=loading])remove();
_imgWidth=imgwidth;
_imgHeight=imgheight;
var argcs=[];
var winWidth=$(window)width();
argcs[maxHeight]=;//最大高度
argcs[maxWidth]=;//最大宽度
argcs[height]=_imgHeight;
argcs[width]=_imgWidth;
var newWH=autoImg(argcs);//获得缩略后的图片宽和高
/************图片预加载重新调整窗口大小及位置************/
$(#+winImgID)css({width:newWH[width]height:newWH[height]top:parseInt($(document)scrollTop())+parseInt(($(window)height()newWH[height])/)left:$(document)scrollLeft()+parseInt(winWidth/)parseInt(newWH[width]/)});  
$(#+winImgID)html(<img  src="+imgsrc+" width="+newWH[width]+"  height="+newWH[height]+"/>);
/************图片预加载重新调整窗口大小及位置**************/

$(#+winImgID+_bg)css(cursorpointer)click(function(){
winImgkill();
});
};
/*************************图片加载完成之后***************************/  
}
unDisplayCallBack:function(){

}
killCallBack:function(){
}
});
winImgdispaly();
}

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=;//宽
var _bgColor=#FFF;//背景样式
var _height=auto;//高
var _content=没有内容;//内容
var _position=center;/*位置topLefttopCentertopRightcenterbottomLeftbottomRightbottomCenter*/
var _lock=true;//是否锁定
var _times=;//显示隐藏的时间
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=;
var _domWidth=$(document)width();
var _domHeight=$(document)height();
/********************本类内部变量*******************/


/********************本类私有函数**********************/
var  _getZindex=function(){/*获得zindex>首先遍历网页div元素ID中含有popBox的DOM获得数量然后 本弹窗背景zindex=基数+当前数量+弹框zindex=基数+当前数量+*/
var _len=$(body)children(div)length;
var _countDiv=;
var _divObj=$(body)children(div);
var _reg=/^popBox_/;//正则表达式
for(var i=;i<_len;i++){
if(_regtest(_divObjeq(i)attr(ID))){
_countDiv+=;
}
}
return _countDiv;//返回已有弹框的数量
}
var _getWinZindex=function(){//获得弹窗的zindex
var _winZindex=_baseZindex+_getZindex()+;
return _winZindex;
}
var _geWinBgZindex=function(){//获得弹窗背景的zindex
var _winBgZindex=_baseZindex+_getZindex()+;
return _winBgZindex;                 
}
var _renderBg=function(){//渲染背景  wwwctocom
var _winBgZindex=_geWinBgZindex();
//alert($(document)height());
$(body)append(<div id="+_thisID+_bg"></div>);//在body中插入一个半透明的背景
$(#+_thisID+_bg)addClass(popBox_bg)css({height:_domHeightwidth:_domWidthopcity:})css(zindex_winBgZindex)fadeTo(_times);  
}
var _creatWin=function(){//创建窗体
$(body)append(<div id="+_thisID+"></div>);
_renderContent(_content);//渲染弹窗主体
_initWin();//初始化窗体
}
var _initWin=function(){//初始化窗体
var _winZindex=_getWinZindex();
var _transHeight=;
if(_height==auto){
_transHeight=auto;
}else{
_transHeight=parseInt(_height)+px;
}
$(#+_thisID)css({width:parseInt(_width)+pxheight:_transHeightposition:absoluteopticity:background:_bgColor})css(zindex_winZindex);  
if(_lock==false){
if(_moveHandle!==undefined&&_moveHandle!==false&&_moveHandle!== ){
$(#+_thisID)children(_moveHandle)css(cursormove);
//alert(_moveHandle);
//alert($(#+_thisID)children(_moveHandle)html());
}
}
_locationWin();//为窗体定位
}
var  _locationWin=function(){/*为窗体定位 topLefttopCentertopRightcenterLeftcentercenterRightbottomLeftbottomCenterbottomRight*/  
var _windowHeight=parseInt($(window)height());
var _windowWidth=parseInt($(window)width());
//alert(_windowWidth+_height);   
var _left=(_windowWidthparseInt(_width))/;
var _top=parseInt($(document)scrollTop())+parseInt(($(window)height()$(#+_thisID)height())/);
$(#+_thisID)css({top:_top+pxleft:_left+px});
}
var _renderContent=function(content){//渲染弹窗主体
$(#+_thisID)append(content);
}
var bindEvent=function(){//绑定事件
if(_thisstatus!==kill&&_thisstatus!==init){
if(_closeButton!==undefined&&_closeButton!== &&_closeButton!==false){
$(#+_thisID+ +_closeButton)css(cursorpointer)live(clickfunction(e){
_thisunDisplay();
});                          
}//若设置了关闭(close)按钮
if(_killButton!==undefined&&_killButton!== &&_killButton!==false){
$(#+_thisID+ +_killButton)css(cursorpointer)live(clickfunction(e){
_thiskill();
});                          
}//若设置了杀死(kill)按钮
}
if(_lock==false){
$(#+_thisID)draggable({cancel:});
}
}        
/*********************本类私有函数*****************/


/**********************本类公有函数******************/
thisstatus=init;//当前状态init>初始化状态display>display状态undisplay>undisplay状态kill>kill状态
thisID=;
var _ID=settings[ID];
if(_ID== ||(typeof _ID)==undefined){
throw new Error(ID不能为空);
}else{
thisID=popBox_+_ID;
}
thisdisplay=function(){//显示函数如果状态是init或者kill重新渲染页面
//alert(_thisstatus);
if(_thisstatus==init||_thisstatus==kill){
_creatWin();//创建窗体
//$(#+_thisID)css(height_domHeight);
if(_shadow==true){//渲染遮罩
/*alert(_shadow);*/
_renderBg();
}
_thisstatus=display;
_displayCallBack();
}else{
$(#+_thisID)fadeIn(_times);
if(_shadow==true){
$(#+_thisID+_bg)fadeIn(_times);
}
_thisstatus=display;
}
//alert(typeof _displayCallBack);
//alert(_thisstatus);
bindEvent();
}
thiskill=function(){//彻底移除
//alert(_thisstatus);
//alert(_thisstatus);
if(_thisstatus==kill||_thisstatus==init){
//alert(_thisstatus);
throw new Error(非法操作当前状态不允许kill);
}
if(_beforeKillCallBack!=undefined){
_beforeKillCallBack();
}
$(#+_thisID)remove();
if(_shadow==true){
$(#+_thisID+_bg)remove();
}
_thisstatus=kill;
if(_killCallBack!=undefined){
_killCallBack();
}
}
thisunDisplay=function(){//隐藏函数
if(_thisstatus==init||_thisstatus==kill){
throw new Error(非法操作当前状态不允许undisplay);
}
if(_unDisplayCallBack!=undefined){
_unDisplayCallBack();
}
$(#+_thisID)fadeOut(_times);
$(#+_thisID+_bg)fadeOut(_times);
_thisstatus=undisplay;        
}
/**********************本类公有函数******************/


}//popBox网页弹窗

var errorBox=function(errorMsg){
//alert(typeof errorBox);
//alert(errorBoxlength);
var errorObj=new popBox({
ID:errorObj
bgColor:#FFF
width:
moveHandle:false
closeButton:false
height:auto
times:
lock:true
content:$(#errorBoxContent)html()
shadow:true
position:center
displayCallBack:function(){  
$(#+errorObjID)find(errorMessage)html();
$(#+errorObjID)find(errorMessage)html(errorMsg);
$(#+errorObjID)find(errorConfirm input)click(function(){
//alert(here);
errorObjkill();
});
}
unDisplayCallBack:function(){
throw new Error(错误不可以关闭只可以Kill);//错误方法只能Kill不能关闭
}
killCallBack:function(){
//errorBox=null;
}
});
errorObjdispaly();  
}//错误弹窗