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

最新推荐文章于 2022-05-06 18:31:54 发布
最新推荐文章于 2022-05-06 18:31:54 发布
阅读量3.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： function kill 正则表达式 div javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PainsOnline/article/details/7492182
版权 
/************************************自动适应的图片弹窗*********************************/
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/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(){//渲染背景
					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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html怎么取消自动适应宽度,html布局的一种宽度自适应解决方案
weixin_34233974的博客
05-30 1956
目前市面上的显示器分辨率是越来越大，而对网页显示而言意味着一屏可以显示更多的内容『一屏：网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内容区域；这不是一个正规词汇，仅为此文方便书写而生造』。对html布局而言，传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间，当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器...
gif在html里为何会自动停止,CSS或JS实现gif动态图片的停止与播放
weixin_42122881的博客
06-07 2056
一、屋外：寒风吹，雪花飘；屋内：空调吹，代码飘上午出去买菜，正好下雨了，还夹杂着冰珠子。鄙人大意，穿的是一件帅气但单薄的黄色大衣，立马冻成了中华田园犬。原本计划去钓鱼的，科科，作罢，上午在家看CCTV5 骑士队vs鹈鹕队，下午补动漫码代码做文章，好生惬意。对于习惯性刷微博的我，总时不时会看到类似下面的游戏：测测你和小白(白百何)有哪些共同点，戳开动图，最先看清的词是什么？ie浏览器的同学可以按es...
鄙人最新作JS为数据添加标签解析标签
PainsOnline的专栏
05-09 1870
// JavaScript Document /** *封装标签 *解封装标签 *[cn]中文[/cn] *[en]英文[/en] **/ var judgeTag=function(str,tagName){//判断是否含有tag标签 var _result=false; var _reg="\["+tagName+"\][^\[\/"+tagName+"\]]*"; //alert
鄙人最新作JS验证组件采用策略模式易扩展
PainsOnline的专栏
04-24 1865
// JavaScript Document var checkObj={/**数据验证类**/ checkFunc:{},//验证数据的函数对象集合 errorMessage:[],//错误消息 rightMessage:[],//正确消息 showInfoFunc:{},//显示消息的函数 checkConfig:{},//验证配置 check:function(dat
IDM 6.40.11.2 弹窗的解决思路
热门推荐
谢绝留言与私信
05-06 3万+
IDM 6.4.11.2 弹窗的解决思路 前言 在IDM官方下载了IDM的30天试用版。 装好后，找了一个和谐工具。运行和谐工具后，看IDM关于那里，已经是全功能版本。 美中不足的是，IDM运行一段时间，就会弹出neg窗口，说文件被修改，最好是去官网下载原版的提示。 我这的弹框如下： 文本提示信息如下： --------------------------- IDM is corrupt --------------------------- The main IDM executive file is
原创：商务通弹窗最新破解方法
孟冬毅！有一很大的舞台，那是世界！
12-19 4195
之前写过一篇破解的商务通弹窗方法，当时也是根据需要破解的。然而现在发现这种破解方式只能针对已经付款400元进行一次更改的用户才能进行破解弹窗任意修改图片。 今天鄙人原创让你不用花费一分钱就直接修改商务通弹窗效果和漂浮图片。。本人原创心血转载的人请注明住处。   商务通弹窗破解 之前的破解的原理：伪造图片Map点击欺骗商务通识别来实现更换图片和点击，这种方法代码使用很
js 自定义弹窗方法
weixin_34034261的博客
01-19 313
　　突然觉得js 很有意思,由于工作需要,在同事小溪哥的帮助下实现了一个自定义弹窗的方法,在此留痕以供日后自勉. 　　尔若有需要并不嫌代码丑陋,那就欢迎借鉴使用,当然,若有大虾看不过去请批评指正,在此鄙人先谢过了^.^! 1 /** 2 * by nacky.long 3 * 创建自定义弹窗 4 * @param param 5 * 参数结构： 6 para...
jQuery图片轮播特效
bcbobo21cn的专栏
08-27 1392
图图： 码码：
UniAPP 安卓应用版本自动更新及下载安装
u011415782的专栏
06-21 1万+
近期进行 Uniapp 的开发过程，最后需要实现版本的自动检测和更新下载操作，特地在此进行文章的整理，以方便道友们减少前进道路上的坎坷，多谢指摘 … 注： 本次指导，以更新 安卓应用为案例，ios、小程序等可举一反三，稍作优化！ 设计思路 1. 在服务端配置一个最新的应用版本号； 并将打包生成的 apk(安卓应用) 置于服务器，保证可成功访问的链接 2. 在前端 ...
JS图片压缩（pc端和移动端都适用）
01-21
最近在做移动端遇到了一个问题就是：手机拍照后，图片过大如果上传到服务器务必会浪费带宽，最重要的是流量啊别慌，好事儿来了，务必就会有人去研究研究图片的压缩： 鄙人结合前人的经验，结合自己实战，总结出一个...
基于MindAR实现的WebAR图片识别追踪功能源码
03-06
不过在这些功能鄙人还都没有实现过，而且跳槽后基本不再做文旅相关的开发，前几天在逛GitHub时发现了现在很火的开源库AR.js(4.4k星星),用于 Web 增强现实的轻量级库，具有图像跟踪、基于位置的 AR 和标记跟踪等功能...
鄙人总结，前端常用方法，附带使用说明
03-08
前端常用方法，已经封装，可以直接下载，通过import {} from 引入，包括下载，算法，排序，深拷贝，防抖节流等一些方法。
AutoDingSignIn:纺院的钉钉体温自动签到
05-24
AutoDingSignIn纺院的钉钉体温自动签到前言还在因为忘记了纺院的体温打卡天天被班主任批吗？还在因为定时定点的体温打卡双休日不能好好睡懒觉吗？现在就是解放你双手的时刻…本UP主是一条大三狗，在学校里学习过一些...
jQuery自动补全示例
09-19
本示例为jquery自动补全的示例，其中包括两部分，第一是在本地构造的json格式的数据供自动...如果对jQuery自动补全感兴趣的又没有接触过的，不妨看看鄙人的小示例，下载后里面有个word文档，用之前可以先看那个，谢谢
JS将汉字转化为拼音
PainsOnline的专栏
01-29 2万+
// JavaScript Document var PinYin = { "a": "\u554a\u963f\u9515", "ai": "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u
JS判断是否是Iphone或者Ipad然后重定向
PainsOnline的专栏
12-07 3462
function isiPhone(){     return (         (navigator.platform.indexOf("iPhone") != -1) ||         (navigator.platform.indexOf("iPod") != -1)     ); }如果你有移动版本的网站，那么你可以使用如下代码重定向
JS单例模式
PainsOnline的专栏
04-24 3298
var SingletonTester = (function () { //参数：传递给单例的一个参数集合 function Singleton(args) { //设置args变量为接收的参数或者为空（如果没有提供的话） var args = args || {}; //设置name参数 this.name =
你还在为IE6纯色背景半透明烦恼吗，还在为实现IE6下各种纯色背景色彩值烦劳吗，给你一个网址，解除烦恼
PainsOnline的专栏
08-31 3198
网址：http://stackoverflow.com/questions/6397712/white-to-transparent-gradient-with-background-image
介绍一些 sota 自动驾驶目标估计预测方法
最新发布
07-11
当谈到自动驾驶目标估计和预测方法时，有一些先进的技术被认为是SOTA（State-of-the-Art，最新技术）的。以下是一些SOTA自动驾驶目标估计和预测方法的示例： 1. 基于深度学习的方法：深度学习在自动驾驶目标估计和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值