源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS自动适应的图片弹窗实例

  • 时间:2022-02-22 20:23 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS自动适应的图片弹窗实例
[u]复制代码[/u] 代码如下:
/************************************自动适应的图片弹窗*********************************/ 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代码
[u]复制代码[/u] 代码如下:
//若使用移动功能,请先导入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.1sucai.cn                 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();      }//错误弹窗
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部