/************************************自动适应的图片弹窗*********************************/

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.ο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('');

/************图片预加载，重新调整窗口大小及位置**************/

$('#'+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>

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('

$('#'+_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();

}//错误弹窗

html自动弹图片,JS自动适应的图片弹窗实例相关推荐

  1. JS自动缩放页面图片

    注:该方法不适用于图片较多的页面! /*** 缩略图** @param bool isScaling 是否缩放* @param int width 宽度* @param int height 高度* ...

  2. html鼠标点击切换图片,js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...

  3. html验证码图片,js+h5 canvas实现图片验证码

    本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下 实现效果 一.使用技术 原生js技术+html5 canvas画图 利用Math.random()函数随 ...

  4. HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）

    本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下 实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...

  5. html滑动验证图片,js实现移动端图片滑块验证功能

    之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canv ...

  6. html5 双指缩放图片,js实现移动端图片预览：手势缩放， 手势拖动，双击放大......

    查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...

  7. php弹窗图片代码大全,render函数生成图片弹窗实例(自己项目实际代码）

    项目中列表显示缩略图,决定做一个双击的图片弹窗效果,项目用的iview的UI框架,用到Modal组件的,以下是render函数生成的图片弹框的原始代码.双击动作调用showLargeImage方法,以 ...

  8. CSS+JS自动循环滚动的多图片幻灯切换展示效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...

    纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...

  10. 以Jar形式为Web项目提供资源文件（JS、CSS与图片）

    一.背景 二.分析 1.把我需要的JS.CSS与图片等资源copy到Web工程中. 2.通过程序采用流的方式读取Jar中的资源流再输出到页面流. 三.分析结果 四.核心代码开发(Jar端) 1.org ...

最新文章

  1. 【青少年编程】【四级】奇偶之和
  2. 【动态规划专题】数字三角形模型
  3. 【干货】前端自学之路（持续更新)
  4. 删除所有的视图，存储过程
  5. java 三大框架面试题
  6. C# 利用DotRas 操作adsl
  7. OpenCV——图像显示与写入
  8. VersionEye开源持续更新工具
  9. 格式化html源码正则,用正则表达式格式化html标签的代码分享
  10. Jvm内存分析入门篇
  11. SpringBoot+Dubbo实战demo
  12. 移动硬盘常见故障分析
  13. 基于VISSIM和Python的二次开发基础—多时段配时控制
  14. [RL 13] VDN (201706, DeepMind)
  15. VC编程助手_VC Assist(内附VC显示行号) VC插件
  16. 爬虫第六篇：scrapy框架爬取某书网整站爬虫爬取
  17. android 判断wifi强弱,Android:通过WifiManager监听Wifi信号强弱
  18. LM4990音频功放芯片
  19. 商业研究(17)：以小见大，看互联网经济(4个股权众筹平台，4个领域，10个项目，8个图)
  20. 蓝桥杯 Java 自行车停放（双向链表解法）

热门文章

  1. 双驰推大规模个性化定制生产迎来颠覆性变革
  2. 【中医学】8 中药-1
  3. 计算机屏幕方向变化,知识：如何切换笔记本电脑屏幕的方向_计算机的基本知识_IT /计算机_信息...
  4. javascript中this和super用法
  5. ubuntu双系统卸载并重新安装
  6. 超级简单的三次方程求解！
  7. 计算机 无法自检,电脑开机不能自检的五大原因
  8. linux下把文件夹压缩成tar.gz的命令
  9. 微信用户昵称特殊符号处理
  10. 窗体 dialog 弹出时动画效果