鄙人最新作JS自动适应的图片弹窗

/************************************自动适应的图片弹窗*********************************/
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.οnlοad=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代码

 // JavaScript Document//若使用移动功能，请先导入jQuery移动UI组件var popBox=function(settings){//弹窗函数settings=[]//alert(typeof settings['width']);//alert(settings['displayCallBack']);/************************本类私有变量*****************************//*******************默认值*****************/var _shadow=true;//是否有遮罩true/falsevar _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-indexvar _winZindex=_baseZindex+_getZindex()+2;return _winZindex;}var _geWinBgZindex=function(){//获得弹窗背景的z-indexvar _winBgZindex=_baseZindex+_getZindex()+1;return _winBgZindex;               }var _renderBg=function(){//渲染背景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自动缩放页面图片
注:该方法不适用于图片较多的页面! /*** 缩略图** @param bool isScaling 是否缩放* @param int width 宽度* @param int height 高度* ...
JS特效二：图片弹窗
今天来看一个商品后台页面设计时常用的js效果,图片弹窗.就是在鼠标点击小图片的时候,会以一个弹窗的形式放大图片,方便我们查看细节,而且还有很多动效在里面.我们先来看看效果图: 这是鼠标在图片外,就是一 ...
CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
以Jar形式为Web项目提供资源文件（JS、CSS与图片）
一.背景二.分析 1.把我需要的JS.CSS与图片等资源copy到Web工程中. 2.通过程序采用流的方式读取Jar中的资源流再输出到页面流. 三.分析结果四.核心代码开发(Jar端) 1.org ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
相册左右滑动html,JS实现的相册图片左右滚动完整实例
本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" ...
js自动实现读取二维码内容
js自动实现读取二维码内容 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
JS自动刷新当前页面
JS自动刷新当前页面在ITOO的后台管理中,有一个需求就是查看考生的登录情况,每个考场当前的考生登录人数详情. 这里,之前是手动的点击刷新按钮,进行刷新,这里前台使用的是easyUI,代码如下: e ...

鄙人最新作JS自动适应的图片弹窗

鄙人最新作JS自动适应的图片弹窗相关推荐

最新文章

热门文章