视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS自动适应的图片弹窗实例_javascript技巧
2020-11-27 21:10:33 责编:小采
文档
 代码如下:
/************************************自动适应的图片弹窗*********************************/
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]').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('');
/************图片预加载,重新调整窗口大小及位置**************/

$('#'+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_/;//正则表达式
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(){//渲染背景 www.gxlcms.com
var _winBgZindex=_geWinBgZindex();
//alert($(document).height());
$('body').append('');//在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('');
_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();
}//错误弹窗

下载本文
显示全文
专题