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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php验证session无效的解决方法
2014/11/04 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
图解javascript作用域链
2019/05/27 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
PyQt5实现简易电子词典
2019/06/25 Python
python3实现绘制二维点图
2019/12/04 Python
Python列表操作方法详解
2020/02/09 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
pycharm安装及如何导入numpy
2020/04/03 Python
python相对企业语言优势在哪
2020/06/12 Python
python入门教程之基本算术运算符
2020/11/13 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
护校行动方案
2014/05/31 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
浅谈MySQL函数
2021/10/05 MySQL