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 相关文章推荐
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js给selected添加options的方法
May 06 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
javascript canvas API内容整理
Feb 16 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python实现抖音点赞功能
2019/04/07 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python timeit模块的使用实践
2020/01/13 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
个人融资协议书
2014/10/02 职场文书
推广普通话主题班会
2015/08/17 职场文书
初中语文教学反思范文
2016/03/03 职场文书