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();
}//錯誤彈窗

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20649.html