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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
原生js写的放大镜效果
Aug 22 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
解决vue页面渲染但dom没渲染的操作
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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php中错误处理操作实例分析
2019/08/23 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
mac系统安装Python3初体验
2018/01/02 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
办公室前台岗位职责
2014/01/04 职场文书
贷款担保申请书
2014/05/20 职场文书
大学生简历求职信
2014/06/24 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
黄埔军校观后感
2015/06/10 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js