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 Global对象
Aug 13 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php之curl设置超时实例
2014/11/03 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
将json对象转换为字符串的方法
2014/02/20 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python 性能优化技巧总结
2016/11/01 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
计算机求职信
2013/12/01 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
美术教学感言
2014/02/22 职场文书
经典商业广告词
2014/03/13 职场文书
委托书格式
2014/08/01 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
庆元旦主持词
2015/07/06 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS