JS が自動的に適応した画像ポップアップ ウィンドウ example_javascript スキル

コードをコピー コードは次のとおりです:

/**************************************自動的に調整された画像ポップアップ******** ** ***********************/
var autoImg=function(argcs){/*画像のサイズを調整し、比例して拡大縮小します argcs['maxHeight']=>最大高さ,argcs ['maxWidth ']=>最大幅、argcs['height']=>画像の高さ、argcs['width']=>画像の幅*/
var _maxHeight=''; _newSize=[]; > maxWidth']){ _maxWidth=argcs['maxWidth']; throw new Error('高さが指定されていません'); '幅'] || Argcs ['高さ'] = = ARGCS ['Width']) {// 高さが幅以上の場合
if (Argcs ['Height'] & gt; = _ Maxheight) {
_newSize['height']=_maxHeight ;
']=argcs['width']> Return _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',
width:906,
moveHandle:false,
closeButton:false,
height:'auto',
回:250、
ロック: true、
content:'',
shadow:true,
position: 'center',
displayCallBack:function(){
$('body').append(''); $('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('');
/************画像のプリロード、ウィンドウのサイズと位置を再調整*******************/

$('#' 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 (設定の種類[ 'width']); ;// マスクの有無 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 back function
Alert ('Display');
}
var _unDisplayCallBack=function(){//unDispaly コールバック関数 ('beforeKill');
// kill 前のコールバック関数
var _killCallBack=function() {//kill コールバック関数
alert('kill'); } }
/***************************このクラスのプライベート変数********************** *** *****/
if(settings['closeButton']!==unknown){
//alert('shadow'); killButton']!==未定義){
// alert('shadow');
//alert('shadow');
/*******************デフォルト値*****************/
If(settings['shadow']!==unknown){
//alert('shadow')
_shadow=settings['shadow'];
}

if( settings['width']!==unknown){
_width=settings['width'];
}
if( settings['height']!==unknown){
_height=settings['height'];
}
if(settings['content']!==未定義){
_content=settings['content'];
}
if(settings['position']!==未定義){
_position=settings['position'];
}
if( settings['times']!==unknown){
_times=settings['times'];
}
if(settings['lock']!==未定義){
_lock=settings['lock'];
}
if(settings['displayCallBack']!=unknown){
//alert('here');
_displayCallBack=settings['displayCallBack'];
}
if( settings['unDisplayCallBack']!==unknown){
_unDisplayCallBack=settings['unDisplayCallBack'];
}
if( settings['beforeKillCallBack']!==unknown){
_beforeKillCallBack=settings['beforeKillCallBack'];
}
if( settings['killCallBack']!==未定義){
_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('

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

'); Initialize form
          var _winZindex=_getWinZindex();                                               ​ _transHeight='auto'; parseInt(_height) 'px'; 1.0,background:_bgColor}).css('z-index',_winZindex);
if(_lock==false){
{
                      $('#' _this.ID).children(_moveHandle).css('cursor','move');                                                                    //alert($(' #' _this.ID).children(_moveHandle).html());
                                                                                                                                                                                                       ){/*Locate topLeft,topCenter,topRight,centerLeft,center,centerRight,bottomLeft,bottomCenter,bottomRight*/
var _windowHeight=parseInt($(window).height());
var _windowWidth =parseInt($(window).width());
                                                                            seInt($ (document).scrollTop()) parseInt(($(window).height()-$('#' _this.ID).height())/2);
                  $('#' _this.ID) .css({top:_top 'px',left:_left 'px'});
                                                                                                                          .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:''});
                    }
            }       
        /***********************Private functions of this class*****************/

        
        /**************************Public functions of this class*******************/
        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(){//Display function, if the status is init or kill, re-render the page
//alert(_this.status);
if(_this.status=='init' ||_this.status=='kill'){
                                                                                                                                                                      >                                                                                                                                                                                                                                                                                                                                                                                      >               _displayCallBack();                                                                                                                                                              ID '_bg').fadeIn(_times);
                                                                 //alert(typeof _displayCallBack);
//alert(_this. status);
bindEvent();
}
this.kill=function(){//Remove completely
//alert(_this.status);
//alert(_this .status);
                                                                                                                                                             Operation, the current status does not allow kill'); }
                   $('#' _this.ID).remove ();
                                                                                                                                                         
this.unDisplay=function(){//Hidden function
if(_this.status=='init'||_this.status=='kill'){
throw new Error('Illegal operation , the current status does not allow undisplay');
                                                                                                             🎜>                $('#' _this.ID).fadeOut( _times);
$('#' _this.ID '_bg').fadeOut(_times);
_this.status='undisplay'; 🎝>*/

                                                                                                                                                                           length);
var errorObj=new popBox({  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();                                      DisplayCallBack:function(){
                                                                                 throw new Error('The error cannot be closed , can only Kill');//Error method can only kill, cannot close
                 },
               killCallBack:function(){                                                                                             🎜>         });
errorObj.dispaly();
}//Error pop-up window