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


Posted in Javascript onJune 29, 2013
/************************************自动适应的图片弹窗*********************************/ 
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(){//渲染背景  3water.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();  
    }//错误弹窗
Javascript 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue.js中created方法作用
Mar 30 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 #Javascript
Ext JS添加子组件的误区探讨
Jun 28 #Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 #Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 #Javascript
js实时获取系统当前时间实例代码
Jun 28 #Javascript
js复制到剪切板的实例方法
Jun 28 #Javascript
Javascript无阻塞加载具体方式
Jun 28 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python实现ping指定IP的示例
2018/06/04 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python绘制地震散点图
2019/06/18 Python
对Python函数设计规范详解
2019/07/19 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
团日活动总结怎么写
2014/06/25 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python