JS自动适应的图片弹窗实例
2013-06-29 00:00
1021 查看
/************************************自动适应的图片弹窗*********************************/ 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" 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_/;//正则表达式 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.jb51.net var _winBgZindex=_geWinBgZindex(); //alert($(document).height()); $('body').append('<div id="'+_this.ID+'_bg"></div>');//在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('<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(); }); }//若设置了关闭(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(); }//错误弹窗
相关文章推荐
- JS自动适应的图片弹窗实例
- 鄙人最新作JS自动适应的图片弹窗
- 图片自动适应容器大小的JS
- [JS]JS控制图片超过宽度自动缩小图片等比例缩放源代码实例
- 一段按页自动滚动文字或图片的Js代码
- 指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
- JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
- js控制textarea输入框根据内容自动适应高度
- JS基础篇--搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)
- 图片固定在图片框内,大小自动适应,宽高避免拉伸[摘自布布分享,tech.bubufx.com]
- 适应各浏览器图片裁剪无刷新上传js插件
- jQuery 图片上传 ajaxfileupload.js PDF文件上传实例
- js实现每日自动换一张图片的方法
- spring(java,js,html) 截图上传图片实例详解
- 关于js中处理时间戳和图片预加载的问题自动提交
- js简易的图片自动轮播
- 用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器
- JS实现div内部的文字或图片自动循环滚动
- js Iframe 自动适应 高度 宽度
- 基于Jquery的图片自动分组且自适应页面的缩略图展示特效