JS가 자동으로 조정한 그림 팝업 창 example_javascript 기술

코드 복사 코드는 다음과 같습니다.

/**************************************자동으로 조정된 사진 팝업******** ** ***********************/
var autoImg=function(argcs){/*이미지 크기를 조정하고 비례적으로 크기를 조정합니다. argcs['maxHeight']=>최대 높이,argcs ['maxWidth']=>최대 너비, argcs['height']=>그림 높이, argcs['width']=>그림 너비*/
           var _maxHeight='' ; _newSize=[]; >                                                                                          >                 새로운 오류 발생('높이가 지정되지 않았습니다.');                   '너비'] || Argcs ['높이'] = = ARGCS ['Width']) {// 높이가 너비보다 작지 않은 경우
if (Argcs ['Height'] & gt; = _ Maxheight) {
_newSize['height']=_maxHeight ;
                                                                                              >                                반환 _newSize
}
               if(argcs['width']>argcs['height']){//宽島大于높은 감정
                     if(argcs['width']>=_maxWidth){                       _newSize[ '너비']=_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',
                너비:906,
               moveHandle:false,
               closeButton:false,
               높이:'auto',
               회:250,
                잠금:true,
               내용:'',
               그림자:true,
               위치: 'center',
               displayCallBack:function()
                                      $('body').append('');
                   $('img[id=loading]').css('z-index',110000). css({위치:'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({너비 :newWH['너비'], 높이:newWH['높이'],top:parseInt($(document).scrollTop())parseInt(($(window).height()-newWH['height'])/ 2),왼쪽:$(document).scrollLeft()parseInt(winWidth/2)-parseInt(newWH['width']/2)});
                      $('#' winImg.ID).html('');
                      /************사진 미리 로드, 창 크기 및 위치 재조정*******************/

                     $('#' winImg.ID '_bg').css('cursor','pointer').click(function(){
winImg.kill()
                         });
                       };
                                     /***************************사진이 로드된 후******************** ** ****/ 
                 },
               unDisplayCallBack:function(){

                   },
                killCallBack:function(){
                  }
               } );
                winImg.dispaly();
    }

popBox代码

复代码 代码如下:

//모바일 기능을 사용한다면 jQuery 모바일 UI 컴포넌트를 먼저 import해주세요.
var popBox=function(settings){//팝업 기능 settings=[]
//alert (설정 유형[ '너비']);
                                                                                                                      ;//마스크 유무 true/false
var _closeButton=false;//닫기 버튼 false/dom 요소
var _killButton=false;// 버튼 종료 false/dom 요소
var _moveHandle=false; //false/dom 요소 드래그
var _width=650;//Width,
var _bgColor='#FFF';//배경 스타일
var _height='auto';//Height
var _content='No content';//Content
var _position='center';/*위치 topLeft,topCenter,topRight,center,bottomLeft,bottomRight ,bottomCenter*/
var _lock=true;/ /잠금 여부 var _times = 500; // 숨겨진 시간 표시
var _displayCallback = 함수() {//표시 뒤로 기능
Alert ('Display');
}
var _unDisplayCallBack=function(){//unDispaly 콜백 함수('beforeKill');
                      //종료 전 콜백 함수
var _killCallBack=function() {//콜백 함수 종료
Alert('kill');
} }
/*************************이 클래스의 개인 변수************************ *** *****/
if(settings['closeButton']!==undefine){
                          //alert('shadow');                                     killButton']!== 정의되지 않음){
              //alert( '그림자'); =정의되지 않음){
               //alert('그림자');                                            
/*******************기본값*****************/
If(settings['shadow']!==undefine){
//alert('shadow')
_shadow=settings['shadow'];
}
                                                                                                                         
        if( 설정['너비']!==정의되지 않음){
            _width=settings['너비'];
            }
        if( 설정['높이']!==정의되지 않음){
            _height=settings['높이'];
            }
        if(settings['content']!==undefine){
            _content=settings['content'];
            }
        if(settings['position']!==undefine){
            _position=settings['position'];
            }
        if( 설정['시간']!==정의되지 않음){
            _times=설정['시간'];
            }
        if(settings['lock']!==undefine){
            _lock=settings['lock'];
            }
        if(settings['displayCallBack']!=undefine){
            //alert('here');
            _displayCallBack=settings['displayCallBack'];
            }       
        if( settings['unDisplayCallBack']!==undefine){
            _unDisplayCallBack=settings['unDisplayCallBack'];
           }   
        if( settings['beforeKillCallBack']!==undefine){
            _beforeKillCallBack=settings['beforeKillCallBack'];
           }
        if( settings['killCallBack']!==undefine){
            _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>                    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('

');//在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('

'); フォームを初期化します
var _winZindex=_getWinZindex(); _transHeight='auto'; _bgColor}).css('z-index',_winZindex);
if(_lock==false){
{
$('#' _this.ID).children(_moveHandle).css('cursor','move'); //alert($( ' #' _this.ID).children(_moveHandle).html());
){/*topLeft、topCenter を見つけます,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/
var _windowHeight =parseInt($(window).height());
var _windowWidth =parseInt($(window).width());
seInt($ (ドキュメント).scrollTop()) parseInt(($( window).height()-$('#' _this.ID).height())/2);
$('#' _this.ID) .css({top:_top 'px',left: _left 'px'});
.ID).append(コンテンツ);
var bindingEvent=function(){//绑定イベント
if(_this.status!=='kill'&&_this.status!=='init'){
if(_closeButton!==unknown&&_closeButton !==' '&&_closeButton!==false){
$('#' _this.ID ' ' _closeButton).css('cursor','pointer').live('click',function(e){
_this.unDisplay();
});                         
}//若设置了关闭(close)按钮
if(_killButton!==unknown&&_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->表示状態态,undisplay->undisplay状態态,kill->kill状態态
this.ID='';
var _ID=設定['ID'];
if(_ID==' '||(typeof _ID)==unknown){
throw new Error('ID は空');
}else{
this.ID='popBox_' _ID;
}
this.display=function(){//表示関数、ステータスが init または kill の場合、ページを再レンダリングします
//alert(_this.status)
if(_this.status= = 'init' _this.status == 'kill'）{
>>_displaycallback（_bg '） //alert(_this.status);
bindingEvent();
this.kill=function(){//完全に削除します
//alert(_this.status); //アラート（_is.status）;
this.unDisplay=function(){//隠し関数
if(_this.status=='init'||_this.status=='kill'){
throw new Error('不正な操作です、現在のステータスでは非表示は許可されていません');
🎜> $('#' _this.ID).fadeOut( _times);
$('#' _this.ID '_bg').fadeOut(_times) );
_this.status='非表示' 🎝>*/


var errorObj=new PopBox({ moveHandle:fal) se、
閉じるボタン :false、
高さ:'自動'、
回:200、
ロック:true、
コンテンツ:$('#errorBoxContent').html()、
シャドウ:true、
位置:' 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(); DisplayCallBack:function(){
throw new Error('エラーを閉じることができません、Kill のみ可能です');//Error メソッドは Kill のみ可能、閉じることはできません
},
killCallBack:function(){ 🎜> });
errorObj.dispaly()
}//エラーポップアップウィンドウ