首页 / JAVASCRIPT / JS自动适应的图片弹窗实例

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS自动适应的图片弹窗实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16741字，纯文字阅读大概需要24分钟。

内容图文

代码如下:
/************************************自动适应的图片弹窗*********************************/
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.gxlcms.com
                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自动适应的图片弹窗实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/366275.html

来源：【匿名】

【上一篇】javascript实现焦点滚动图效果具体方法【下一篇】javascript 怎么调用php方法

更多 ►

【JS自动适应的图片弹窗实例】教程文章相关的互联网学习教程文章

Javascript 字典应用实例【代码】

字典时一个很有用的工具，在之前C#项目中有经常使用，这篇博文主要讲解在Javascript中，字典的实际应用场景首先在JS中，是没有Dictionary‘类的，我们需要实现键值（KEY） -- 数值（VALUE）的对应关系，最好的办法就是用数组首先交代下背景，我需要根据数组里的站点编号，获取到对应的站点名称首先通过Thrift接口，获取到数据库里面的设备信息，通过Ajax传输到js页面，遍历数组PS : 数据结构如下：# 设备信息 struct Device{int i...

每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能</title> <script> window.onload = function(){var fibonacci = function(){var memo = [0,1];var fib = function(n){var result = memo[n];if(typeof result != "number"){result = fib(n-1) + fib(n-2);memo[n] = result;}console.log("mem...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

JavaScript图形实例：图形的扇形变换和环形变换【图】

1.1 扇形变换将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换。设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2)，长方形的长为X，扇形圆心坐标为（X0,Y0），扇形半径为L，扇形与X轴的最小夹角为B，扇形弧对应夹角为C，则点P2的坐标计算公式为： X2=(L+Y1)*COS(θ)+X0 Y2=-(L+Y1)*SIN(θ)+Y0 其中： θ=C*(X-X1)/X1+B 图1 扇形变换生成...

javascript中ajax post实例详解

一，原生态的XMLHttpRequest 代码如下复制代码 <script language="javascript"> function saveintroduce() { //获取接受返回信息层 var introducemsg = document.getElementById("introducemsg"); //获取表单对象和用户信息值 var f = document.introduceedt; var elm1 = encodeURIComponent(f.elm1.value); //接收表单的URL地址 var url = "save.php?id=<?=$_GET["id"]?>"; //需要...

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style>#date{width:200px;background-color:lime;} </style> <script> function getStyle(date,cssprop,cssprop2){//IEif(date.currentStyle){return date.currentStyle[cssprop];}else if(document.defaultView && document.defaultView.getComputedSty...

每天一个JavaScript实例-去除字符串末尾的空白

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-去除字符串末尾的空白</title> <script> function white(){ var input = document.getElementById("inputid"); var lines = input.value.split("\n"); var resultString = ""; for (var i = 0; i < lines.length; i++){var string = lines[i].trim();resultString += string + "-";} alert(...

javascript实例学习之四——javascript分页【代码】

话不多少，直接上代码html代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>javascript分页效果</title><style>a{margin-right:5px;}</style> </head> <body><div id="div1"> </div><script src="js/myPage.js"></script> </body> </html> javascript代码：window.onload = function() {var page = new Page({‘id‘: ‘div1‘,‘allNum‘: 10,‘showNum‘: 5,‘nowNum‘: 10,‘callback‘:fun...

javascript控件（二）：一个好用的表格（分页实例）【代码】

一、官网https://datatables.net/二、引用<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>三、ajax分页初始化1. 前端脚本部分$(‘#example2‘).DataTable( {"processing": true, //查询缓慢的时候会有一个Processing状态的提示"serverSide": true,"ajax": "tabledate/paging?myparam=HAHA", //...

javaScript中==和===对数组、对象的判断是它们是否同一个实例对象

问题描述在实现业务时，大量用到了 if（a === b）这样的判断，但有一个类似判断一直进不去这个if条件， a === b 返回的一直是false，但是其他几个类似判断，都正常触发条件。原因分析我们都知道 === 是严格相等，首先要两个值的类型相等，无法触发条件的这个判断，a和b都是Array对象，且通过打印，看到数组中的元素是一样的。于是写了几个测试判断，如下：通过上图可以看到，对于javascript的基础类型Number、String，如c2和d2都等...

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3【代码】【图】

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记23.3 响应鼠标动作图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig...

JS实例之滚动固定效果，实现顶部菜单固定效果。【代码】

1<head> 2<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3<title>无标题文档</title> 4<style type="text/css"> 5*{margin:0px auto; padding:0px;} 6#tou{width:100%; height:200px; background-color:#06C;} 7#menu{width:100%; height:80px; background-color:#666;} 8#neirong{width:100%; height:2000px;} 9</style>10</head>1112<body>13<div id="tou"></div>14<div id="menu"></div>15<div id="ne...

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2【图】

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记13.2 照片加载与定位根据功能设计，可以先写好 HTML 结构基础，再配好 CSS 做出大致效果，最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中，JavaScript代码保存到 eg3.js 文件中，...

每天一个JavaScript实例-检测表单数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style>[role="alert"]{background-color: #fcc;font-weight: bold;padding:5px;border:1px dashed #000;}div{margin:10px 0;padding:5px;width:400px;background-color: #fff;} </style><script> window.onload = function(){document.getElementById("thirdfield").o...

JS对Cookie的应用--JavaScript实例集锦（初学）【代码】【图】

一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等可以在火狐浏览器查看本地代码的cookie信息：打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie <!DOCTYPE html><html><head><title>Cookie</title></head><script type="text/javascript">/* var oDate=new Date();oDate.setDate(oDate.getDate()+30);document.cookie="user=blue;expires=";// document.cookie="pass=123";*///alert(document.cookie);...

首页 / JAVASCRIPT / JS自动适应的图片弹窗实例

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS自动适应的图片弹窗实例】教程文章相关的互联网学习教程文章

实例 - 相关标签

自动 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程