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:'#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.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;
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代碼

復制代碼 代碼如下:

//若使用移動功能，請先導入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_/;//正則