JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例
更新時(shí)間：2013年06月29日 15:07:50 投稿：shangke
這篇文章介紹了JS自動(dòng)適應(yīng)的圖片彈窗實(shí)例代碼，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
/************************************自動(dòng)適應(yīng)的圖片彈窗*********************************/
var autoImg=function(argcs){/*調(diào)整圖片大小，等比例縮放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)});
/************圖片預(yù)加載，重新調(diào)整窗口大小及位置**************/
var img=new Image();
var _imgWidth=0;
var _imgHeight=0;
img.src=imgSrc;//為img對(duì)象添加地址
// 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);//獲得縮略后的圖片寬和高
/************圖片預(yù)加載，重新調(diào)整窗口大小及位置************/
$('#'+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']+'"/>');
/************圖片預(yù)加載，重新調(diào)整窗口大小及位置**************/
$('#'+winImg.ID+'_bg').css('cursor','pointer').click(function(){
winImg.kill();
});
};
/*************************圖片加載完成之后***************************/
},
unDisplayCallBack:function(){
},
killCallBack:function(){
}
});
winImg.dispaly();
}
popBox代碼
復(fù)制代碼 代碼如下:
//若使用移動(dòng)功能，請(qǐng)先導(dǎo)入jQuery移動(dòng)UI組件
var popBox=function(settings){//彈窗函數(shù)settings=[]
//alert(typeof settings['width']);
//alert(settings['displayCallBack']);
/************************本類私有變量*****************************/
/*******************默認(rèn)值*****************/
var _shadow=true;//是否有遮罩true/false
var _closeButton=false;//關(guān)閉按鈕false/dom元素
var _killButton=false;//kill按鈕false/dom元素
var _moveHandle=false;//拖動(dòng)手柄false/dom元素
var _width=650;//寬,
var _bgColor='#FFF';//背景樣式
var _height='auto';//高
var _content='沒有內(nèi)容';//內(nèi)容
var _position='center';/*位置topLeft,topCenter,topRight,center,bottomLeft,bottomRight,bottomCenter*/
var _lock=true;//是否鎖定
var _times=500;//顯示，隱藏的時(shí)間
var _displayCallBack=function(){//dispaly回調(diào)函數(shù)
alert('display');
}
var _unDisplayCallBack=function(){//unDispaly回調(diào)函數(shù)
alert('unDisplay');
}
var _beforeKillCallBack=function(){
alert('beforeKill');
}//kill之前的回調(diào)函數(shù)
var _killCallBack=function(){//kill回調(diào)函數(shù)
alert('kill');
}
/*******************默認(rèn)值*****************/
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'];
}
/******************獲得設(shè)置值********************/
/**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);
/************************本類私有變量******************************/
/*********************本類內(nèi)部變量********************/
var _this=this;
var _baseZindex=10000;
var _domWidth=$(document).width();
var _domHeight=$(document).height();
/********************本類內(nèi)部變量*******************/
/********************本類私有函數(shù)**********************/
var _getZindex=function(){/*獲得z-index->首先遍歷網(wǎng)頁(yè)div元素ID中含有popBox的DOM,獲得數(shù)量，然后本彈窗背景z-index=基數(shù)+當(dāng)前數(shù)量+1,彈框z-index=基數(shù)+當(dāng)前數(shù)量+2*/
var _len=$('body').children('div').length;
var _countDiv=0;
var _divObj=$('body').children('div');
var _reg=/^popBox_/;//正則表達(dá)式
for(var i=0;i<_len;i++){
if(_reg.test(_divObj.eq(i).attr('ID'))){
_countDiv+=1;
}
}
return _countDiv;//返回已有彈框的數(shù)量
}
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.dbjr.com.cn
var _winBgZindex=_geWinBgZindex();
//alert($(document).height());
$('body').append('<div id="'+_this.ID+'_bg"></div>');//在body中一個(gè)半透明的背景
$('#'+_this.ID+'_bg').addClass('popBox_bg').css({height:_domHeight,width:_domWidth,opcity:0}).css('z-index',_winBgZindex).fadeTo(_times,0.7);
}
var _creatWin=function(){//創(chuàng)建窗體
$('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();
});
}//若設(shè)置了關(guān)閉(close)按鈕
if(_killButton!==undefined&&_killButton!==' '&&_killButton!==false){
$('#'+_this.ID+' '+_killButton).css('cursor','pointer').live('click',function(e){
_this.kill();
});
}//若設(shè)置了按鈕
}
if(_lock==false){
$('#'+_this.ID).draggable({cancel:''});
}
}
/*********************本類私有函數(shù)*****************/
/**********************本類公有函數(shù)******************/
this.status='init';//當(dāng)前狀態(tài)init->初始化狀態(tài),display->display狀態(tài),undisplay->undisplay狀態(tài),kill->kill狀態(tài)
this.ID='';
var _ID=settings['ID'];
if(_ID==' '||(typeof _ID)==undefined){
throw new Error('ID不能為空');
}else{
this.ID='popBox_'+_ID;
}
this.display=function(){//顯示函數(shù),如果狀態(tài)是init或者kill重新渲染頁(yè)面
//alert(_this.status);
if(_this.status=='init'||_this.status=='kill'){
_creatWin();//創(chuàng)建窗體
//$('#'+_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('非法操作，當(dāng)前狀態(tài)不允許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(){//隱藏函數(shù)
if(_this.status=='init'||_this.status=='kill'){
throw new Error('非法操作，當(dāng)前狀態(tài)不允許undisplay');
}
if(_unDisplayCallBack!=undefined){
_unDisplayCallBack();
}
$('#'+_this.ID).fadeOut(_times);
$('#'+_this.ID+'_bg').fadeOut(_times);
_this.status='undisplay';
}
/**********************本類公有函數(shù)******************/
}//popBox網(wǎng)頁(yè)彈窗
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('錯(cuò)誤不可以關(guān)閉，只可以Kill');//錯(cuò)誤方法只能Kill，不能關(guān)閉
},
killCallBack:function(){
//errorBox=null;
}
});
errorObj.dispaly();
}//錯(cuò)誤彈窗
相關(guān)文章
ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
這篇文章主要為大家詳細(xì)介紹了ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
最近在學(xué)習(xí)ES，所以想著將自己學(xué)習(xí)的一些經(jīng)驗(yàn)技巧總結(jié)一下，方便學(xué)習(xí)，所以下面這篇文章主要跟大家分享介紹了關(guān)于ES6學(xué)習(xí)之變量的兩種命名方法，文中通過示例代碼介紹的很詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Layui數(shù)據(jù)表格跳轉(zhuǎn)到指定頁(yè)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格跳轉(zhuǎn)到指定頁(yè)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
泛型程序設(shè)計(jì)(generic programming)是程序設(shè)計(jì)語(yǔ)言的一種風(fēng)格或范式,下面這篇文章主要給大家介紹了關(guān)于TypeScript中泛型使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JS區(qū)分Object與Aarry的六種方法總結(jié)
下面小編就為大家?guī)?lái)一篇JS區(qū)分Object與Aarry的六種方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟
本文主要介紹了Webpack實(shí)現(xiàn)多頁(yè)面打包的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
httpclient模擬登陸具體實(shí)現(xiàn)(使用js設(shè)置cookie)
最簡(jiǎn)單的方法就是通過得到的cookie定制一個(gè)httpclient，感興趣的朋友可以了解下本文2013-12-12
我們經(jīng)常使用 window.onload 來(lái)處理頁(yè)面，當(dāng)頁(yè)面加載完成做一些事情。但這個(gè) window.onload 是頁(yè)面全部加載完成，甚至包括圖片,下面我們就來(lái)詳細(xì)探討下window.onload的用法2015-09-09
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端js觸摸事件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Javascript中大括號(hào)“{}”的多義性。需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-12-12