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

复制代码代码如下:
/************************************自动适应的图片弹窗*********************************/
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（）{//渲染背景 www.jb51.net
                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（）;
    }//错误弹窗