JavaScript 仿LightBox内容显示效果

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
</ head >

< body >

< br  />< br  />< br  />< br  />

< script >

var  isIE  =  (document.all)  ?   true  :  false ;

var  isIE6  =  isIE  &&  ([ / MSIE (\d)\.0 / i.exec(navigator.userAgent)][ 0 ][ 1 ]  ==   6 );


function  Each(list, fun){
for  ( var  i  =   0 , len  =  list.length; i  <  len; i ++ ) { fun(list[i], i); }
};

var  $  =   function  (id) {
     return   " string "   ==   typeof  id  ?  document.getElementById(id) : id;
};

var  Class  =  {
  create:  function () {
     return   function () {
       this .initialize.apply( this , arguments);
    }
  }
}

Object.extend  =   function (destination, source) {
   for  ( var  property  in  source) {
    destination[property]  =  source[property];
  }
   return  destination;
}

Function.prototype.bind  =   function (object) {
   var  __method  =   this , args  =  Array.apply( null , arguments); args.shift();
   return   function () {
     return  __method.apply(object, args);
  }
}

var  OverLay  =  Class.create();
OverLay.prototype  =  {
  initialize:  function (overlay, options) {
this .Lay  =  $(overlay); // 覆盖层

// ie6设置覆盖层大小程序
this ._size  =    function (){};

this .SetOptions(options);

this .Color  =   this .options.Color;
this .Opacity  =  parseInt( this .options.Opacity);
this .zIndex  =  parseInt( this .options.zIndex);

this .Set();
  },
   // 设置默认属性
  SetOptions:  function (options) {
     this .options  =  { // 默认值
Color: " #fff " , // 背景色
Opacity: 50 , // 透明度(0-100)
zIndex: 1000 // 层叠顺序
    };
    Object.extend( this .options, options  ||  {});
  },
   // 创建
  Set:  function () {
this .Lay.style.display  =   " none " ;
this .Lay.style.zIndex  =   this .zIndex;
this .Lay.style.left  =   this .Lay.style.top  =   0 ;

if (isIE6){
this .Lay.style.position  =   " absolute " ;
this ._size  =   function (){
this .Lay.style.width  =  Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)  +   " px " ;
this .Lay.style.height  =  Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)  +   " px " ;
}.bind( this );
// 遮盖select
this .Lay.innerHTML  =   ' <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe> '
}  else  {
this .Lay.style.position  =   " fixed " ;
this .Lay.style.width  =   this .Lay.style.height  =   " 100% " ;
}
  },
   // 显示
  Show:  function () {
// 设置样式
this .Lay.style.backgroundColor  =   this .Color;
// 设置透明度
if (isIE){
this .Lay.style.filter  =   " alpha(opacity: "   +   this .Opacity  +   " ) " ;
}  else  {
this .Lay.style.opacity  =   this .Opacity  /   100 ;
}
// 兼容ie6
if (isIE6){  this ._size(); window.attachEvent( " onresize " ,  this ._size); }

this .Lay.style.display  =   " block " ;
  },
   // 关闭
  Close:  function () {
this .Lay.style.display  =   " none " ;
if (isIE6){ window.detachEvent( " onresize " ,  this ._size); }
  }
};



var  LightBox  =  Class.create();
LightBox.prototype  =  {
  initialize:  function (box, overlay, options) {

this .Box  =  $(box); // 显示层

this .OverLay  =   new  OverLay(overlay, options); // 覆盖层

this .SetOptions(options);

this .Fixed  =   !! this .options.Fixed;
this .Over  =   !! this .options.Over;
this .Center  =   !! this .options.Center;
this .onShow  =   this .options.onShow;

this .Box.style.zIndex  =   this .OverLay.zIndex  +   1 ;
this .Box.style.display  =   " none " ;

// 兼容ie6用的属性
if (isIE6){  this ._top  =   this ._left  =   0 ;  this ._select  =  []; }
  },
   // 设置默认属性
  SetOptions:  function (options) {
     this .options  =  { // 默认值
Fixed: false , // 是否固定定位
Over: true , // 是否显示覆盖层
Center: false , // 是否居中
onShow: function (){} // 显示时执行
};
    Object.extend( this .options, options  ||  {});
  },
   // 兼容ie6的固定定位程序
  _fixed:  function (){
var  iTop  =   this .Box.offsetTop  +  document.documentElement.scrollTop  -   this ._top, iLeft  =   this .Box.offsetLeft  +  document.documentElement.scrollLeft  -   this ._left;
// 居中时需要修正
if ( this .Center){ iTop  +=   this .Box.offsetHeight  /   2 ; iLeft  +=   this .Box.offsetWidth  /   2 ; }

this .Box.style.top  =  iTop  +   " px " ;  this .Box.style.left  =  iLeft  +   " px " ;

this ._top  =  document.documentElement.scrollTop;  this ._left  =  document.documentElement.scrollLeft;
  },
   // 显示
  Show:  function (options) {
// 固定定位
if ( this .Fixed){
if (isIE6){
// 兼容ie6
this .Box.style.position  =   " absolute " ;
this ._top  =  document.documentElement.scrollTop;  this ._left  =  document.documentElement.scrollLeft;
window.attachEvent( " onscroll " ,  this ._fixed.bind( this ));
}  else  {
this .Box.style.position  =   " fixed " ;
}
}  else  {
this .Box.style.position  =   " absolute " ;
}
// 覆盖层
if ( this .Over){
// 显示覆盖层，覆盖层自带select隐藏
this .OverLay.Show();
}  else  {
// ie6需要把不在Box上的select隐藏
if (isIE6){
this ._select  =  [];
var  oThis  =   this ;
Each(document.getElementsByTagName( " select " ),  function (o){
if (oThis.Box.contains  ?   ! oThis.Box.contains(o) :  ! (oThis.Box.compareDocumentPosition(o)  &   16 )){
o.style.visibility  =   " hidden " ; oThis._select.push(o);
}
})
}
}

this .Box.style.display  =   " block " ;

// 居中
if ( this .Center){
this .Box.style.top  =   this .Box.style.left  =   " 50% " ;
// 显示后才能获取
var  iTop  =   -   this .Box.offsetHeight  /   2 , iLeft  =   -   this .Box.offsetWidth  /   2 ;
// 不是fixed或ie6要修正
if ( ! this .Fixed  ||  isIE6){ iTop  +=  document.documentElement.scrollTop; iLeft  +=  document.documentElement.scrollLeft; }
this .Box.style.marginTop  =   iTop  +   " px " ;  this .Box.style.marginLeft  =  iLeft  +   " px " ;
}

this .onShow();
  },
   // 关闭
  Close:  function () {
this .Box.style.display  =   " none " ;
this .OverLay.Close();
if (isIE6){ window.detachEvent( " onscroll " ,  this ._fixed); Each( this ._select,  function (o){ o.style.visibility  =   " visible " ; }); }
  }
};


function  addEventHandler(oTarget, sEventType, fnHandler) {
if  (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler,  false );
}  else   if  (oTarget.attachEvent) {
oTarget.attachEvent( " on "   +  sEventType, fnHandler);
}  else  {
oTarget[ " on "   +  sEventType]  =  fnHandler;
}
};

function  removeEventHandler(oTarget, sEventType, fnHandler) {
     if  (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler,  false );
    }  else   if  (oTarget.detachEvent) {
        oTarget.detachEvent( " on "   +  sEventType, fnHandler);
    }  else  { 
        oTarget[ " on "   +  sEventType]  =   null ;
    }
};

if ( ! isIE){
HTMLElement.prototype.__defineGetter__( " currentStyle " ,  function  () {
return   this .ownerDocument.defaultView.getComputedStyle( this ,  null );
});
}

// 拖放程序
var  Drag  =  Class.create();
Drag.prototype  =  {
   // 拖放对象,触发对象
  initialize:  function (obj, drag, options) {
     var  oThis  =   this ;

this ._obj  =  $(obj); // 拖放对象
this .Drag  =  $(drag); // 触发对象
this ._x  =   this ._y  =   0 ; // 记录鼠标相对拖放对象的位置
// 事件对象(用于移除事件)
this ._fM  =   function (e){ oThis.Move(window.event  ||  e); }
this ._fS  =   function (){ oThis.Stop(); }

this .SetOptions(options);

this .Limit  =   !! this .options.Limit;
this .mxLeft  =  parseInt( this .options.mxLeft);
this .mxRight  =  parseInt( this .options.mxRight);
this .mxTop  =  parseInt( this .options.mxTop);
this .mxBottom  =  parseInt( this .options.mxBottom);
this .mxContainer  =   this .options.mxContainer;

this .onMove  =   this .options.onMove;
this .Lock  =   !! this .options.Lock;

this ._obj.style.position  =   " absolute " ;
addEventHandler( this .Drag,  " mousedown " ,  function (e){ oThis.Start(window.event  ||  e); });
  },
   // 设置默认属性
  SetOptions:  function (options) {
     this .options  =  { // 默认值
Limit: false , // 是否设置限制(为true时下面参数有用,可以是负数)
mxLeft: 0 , // 左边限制
mxRight: 0 , // 右边限制
mxTop: 0 , // 上边限制
mxBottom: 0 , // 下边限制
mxContainer: null , // 指定限制在容器内
onMove: function (){}, // 移动时执行
Lock: false // 是否锁定
    };
    Object.extend( this .options, options  ||  {});
  },
   // 准备拖动
  Start:  function (oEvent) {
if ( this .Lock){  return ; }
// 记录鼠标相对拖放对象的位置
this ._x  =  oEvent.clientX  -   this ._obj.offsetLeft;
this ._y  =  oEvent.clientY  -   this ._obj.offsetTop;
// mousemove时移动 mouseup时停止
addEventHandler(document,  " mousemove " ,  this ._fM);
addEventHandler(document,  " mouseup " ,  this ._fS);
// 使鼠标移到窗口外也能释放
if (isIE){
addEventHandler( this .Drag,  " losecapture " ,  this ._fS);
this .Drag.setCapture();
} else {
addEventHandler(window,  " blur " ,  this ._fS);
}
  },
   // 拖动
  Move:  function (oEvent) {
// 判断是否锁定
if ( this .Lock){  this .Stop();  return ; }
// 清除选择(ie设置捕获后默认带这个)
window.getSelection  &&  window.getSelection().removeAllRanges();
// 当前鼠标位置减去相对拖放对象的位置得到offset位置
var  iLeft  =  oEvent.clientX  -   this ._x, iTop  =  oEvent.clientY  -   this ._y;
// 设置范围限制
if ( this .Limit){
// 如果设置了容器,因为容器大小可能会变化所以每次都要设
if ( !! this .mxContainer){
this .mxLeft  =   this .mxTop  =   0 ;
this .mxRight  =   this .mxContainer.clientWidth;
this .mxBottom  =   this .mxContainer.clientHeight;
}
// 获取超出长度
var  iRight  =  iLeft  +   this ._obj.offsetWidth  -   this .mxRight, iBottom  =  iTop  +   this ._obj.offsetHeight  -   this .mxBottom;
// 这里是先设置右边下边再设置左边上边,可能会不准确
if (iRight  >   0 ) iLeft  -=  iRight;
if (iBottom  >   0 ) iTop  -=  iBottom;
if ( this .mxLeft  >  iLeft) iLeft  =   this .mxLeft;
if ( this .mxTop  >  iTop) iTop  =   this .mxTop;
}
// 设置位置
// 由于offset是把margin也算进去的所以要减去
this ._obj.style.left  =  iLeft  -  (parseInt( this ._obj.currentStyle.marginLeft)  ||   0 )  +   " px " ;
this ._obj.style.top  =  iTop  -  (parseInt( this ._obj.currentStyle.marginTop)  ||   0 )  +   " px " ;
// 附加程序
this .onMove();
  },
   // 停止拖动
  Stop:  function () {
// 移除事件
removeEventHandler(document,  " mousemove " ,  this ._fM);
removeEventHandler(document,  " mouseup " ,  this ._fS);
if (isIE){
removeEventHandler( this .Drag,  " losecapture " ,  this ._fS);
this .Drag.releaseCapture();
} else {
removeEventHandler(window,  " blur " ,  this ._fS);
}
  }
};

</ script >



< style >
.lightbox { width : 300px ; background : #FFFFFF ;  top : 20% ;  left : 20% ; border : 1px solid #ccc ; line-height : 25px ;  margin : 0 ; }
.lightbox dt { background : #f4f4f4 ;  padding : 5px ;  cursor : move ; }
</ style >



< dl  id ="idBox"  class ="lightbox" >
   < dt  id ="idBoxHead" >< b > LightBox </ b >   </ dt >
   < dd >
    选择效果显示
     < br  />< br  />
     < input  name =""  type ="button"  value =" 关闭 "  id ="idBoxCancel"   />< br  />< br  />
   </ dd >
</ dl >


< div  id ="idOverlay" ></ div >





< div  style ="margin:0 auto; width:700px; border:1px solid #000000;" >



< input  name =""  type ="button"  value ="关闭覆盖层"  id ="btnOverlay"   />
< input  name =""  type ="button"  value ="黑色覆盖层"  id ="btnOverColor"   />
< input  name =""  type ="button"  value ="全透覆盖层"  id ="btnOverOpacity"   />
< input  name =""  type ="button"  value ="取消居中"  id ="btnCenter"   />
< br  />< br  />
选择效果： < br  />
< select  id ="idEffect" >
< option  value ="0" > 还原效果 </ option >
< option  value ="4" > 定位效果 </ option >
< option  value ="2" > 设置拖放 </ option >
< option  value ="6" > 视框定位拖放 </ option >
</ select >  
< input  name =""  type ="button"  value =" 打开 "  id ="idBoxOpen"   />

< script >



var  box  =   new  LightBox( " idBox " ,  " idOverlay " , { Center:  true  });


var  drag  =   new  Drag( " idBox " ,  " idBoxHead " , { mxContainer: document.documentElement, Lock:  true  });


$( " idBoxCancel " ).onclick  =   function (){ box.Close(); }
$( " idBoxOpen " ).onclick  =   function (){ box.Show(); }

$( " idEffect " ).onchange  =   function (){
box.Close();

switch  (parseInt( this .value)) {
case   4  :
box.Fixed  =   true ;
drag.Lock  =   true ;
drag.Limit  =   false ;
break ;
case   2  :
box.Fixed  =   false ;
drag.Lock  =   false ;
drag.Limit  =   false ;
break ;
case   6  :
box.Fixed  =   true ;;
drag.Lock  =   false ;
drag.Limit  =   true ;
break ;
case   0  :
default  :
box.Fixed  =   false ;
drag.Lock  =   true ;
drag.Limit  =   false ;
}
}



$( " btnOverlay " ).onclick  =   function (){
box.Close();
if (box.Over){
box.Over  =   false ;
this .value  =   " 打开覆盖层 " ;
}  else  {
box.Over  =   true ;
this .value  =   " 关闭覆盖层 " ;
}
}

$( " btnOverColor " ).onclick  =   function (){
box.Close();
box.Over  =   true ;
if (box.OverLay.Color  ==   " #fff " ){
box.OverLay.Color  =   " #000 " ;
this .value  =   " 白色覆盖层 " ;
}  else  {
box.OverLay.Color  =   " #fff "
this .value  =   " 黑色覆盖层 " ;
}
}

$( " btnOverOpacity " ).onclick  =   function (){
box.Close();
box.Over  =   true ;
if (box.OverLay.Opacity  ==   0 ){
box.OverLay.Opacity  =   50 ;
this .value  =   " 全透覆盖层 " ;
}  else  {
box.OverLay.Opacity  =   0 ;
this .value  =   " 半透覆盖层 " ;
}
}

$( " btnCenter " ).onclick  =   function (){
box.Close();
if (box.Center){
box.Center  =   false ;
this .value  =   " 设置居中 " ;
}  else  {
box.Center  =   true ;
this .value  =   " 取消居中 " ;
}
}


</ script >







< br  />< br  />





< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />< br  />
< br  />



</ div >




</ body >
</ html >

 

http://bbs.51js.com/viewthread.php?tid=80610

转载于:https://www.cnblogs.com/Ewin/archive/2008/09/15/1291037.html