[原创]一个精巧的层控制工具 LayerUtil ....希望能满足大家的基本需求 [Javascript]

[原创]一个精巧的层控制工具 LayerUtil ....希望能满足大家的基本需求 [Javascript]

 1  /* *
 2  *作者 ：Fantasy
 3  *Email: [email protected]
 4  *QQ   : 8635335
 5  *Blog : http://www.blogjava.net/fantasy
 6  *版本 ：V1.0
 7  */
 8  var  LayerUtil  =  
 9  {
10      createLayer :  function ( innerHTML )
11      {
12           return   new  FantasyLayer( innerHTML );    
13      }
14  }
15 
16  var  FantasyLayer  =   function  ( innerHTML )
17  {
18       var  IE  =  document.all  ?   true  :  false  ;
19      
20       var  layerElement  =  document.createElement( " DIV " );
21      
22       var  layerInnerHTML     =  innerHTML;
23      
24       this .closeLayer  =   function ()
25      {
26          layerElement.style.display  =   " none " ;
27      }
28      
29       this .getLayer  =   function  ()
30      {
31           return  layerElement;
32      }
33      
34       this .setInnerHTML  =   function  ( html )
35      {
36          layerInnerHTML  =  html;
37      }
38      
39       this .setDisplay  =   function ( isView )
40      {
41           this .reloadLayer();
42          layerElement.style.display  =  isView  ?   " block "  :  " none " ;
43      }
44      
45       this .moveLayer  =   function  ( x , y )
46      {
47          layerElement.style.left  =  x  +   " px " ;
48          layerElement.style.top  =   y  +   " px " ;
49      }
50 
51       this .viewLayer  =   function  ( isFade , x , y )
52      {
53           this .reloadLayer( x , y );
54           if (  ! isFade ) {  return   false  };
55          IE  ?  layerElement.style.filter  =   " alpha(opacity=0) "  : layerElement.style.opacity  =   " 0 " ;
56           var  opacity  =   0  ;
57           var  intervalID  =  window.setInterval
58          (
59               function ()
60              {
61                   if ( opacity  <   100  )
62                  { 
63                       if ( IE )
64                      {
65                          layerElement.style.filter  =   " alpha(opacity= "   +   opacity  +   " ) " ;
66                      }
67                       else
68                      {
69                          layerElement.style.opacity  =  (opacity  /   100 );
70                      }
71                      opacity  =  opacity  +   5 ;
72                  }
73                   else
74                  { 
75                      window.clearInterval( intervalID );
76                  }
77              }
78              ,
79               50
80          )
81      }
82 
83       this .reloadLayer  =   function  ( x , y )
84      {
85          document.body.appendChild(layerElement);
86          layerElement.style.position  =   " absolute " ;
87          layerElement.style.display  =   " block " ;
88          layerElement.innerHTML  =  layerInnerHTML;
89           var  docWidth  =  document.documentElement.clientWidth;
90           var  docHeight  =  document.documentElement.clientHeight;
91           var  scrollTop  =  document.documentElement.scrollTop;
92           var  scrollLeft  =  document.documentElement.scrollLeft;
93          layerElement.style.left  =  (  ! isNaN(x)  ?  x : (docWidth  -  layerElement.offsetWidth) / 2     +  scrollLeft)    +   " px " ;
94          layerElement.style.top   =  (  ! isNaN(y)  ?  y : (docHeight  -  layerElement.offsetHeight) / 2   +  scrollTop )    +   " px " ;
95      }
96  }

使用帮助 ：

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3  < head >
 4  < style  type ="text/css" >
 5  . {
 6      font-size : 12px ;
 7  }
 8  </ style >
 9  < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
10  < title > Layer Use </ title >
11  < script  language ="javascript"  src ="layer.js" >
12 
13 
14  /*
15  API 说明
16      
17  this.getLayer() 返回层对象
18 
19  this.setInnerHTML( html ) 设置层内HTML代码
20 
21  this.setDisplay( isView ) 设置层的显示状态
22 
23  this.moveLayer( x , y ) 移动层到指定位置
24 
25  this.viewLayer( isFade , x , y ) 显示层 isFade 是否使用渐渐显示效果 (x , y) 可选, 默认显示为页面正中心
26 
27  this.reloadLayer = function ( x , y ) 从新加载层
28 
29  * */
30  </ script >
31 
32 
33  < script  language ="javascript" >
34  /* * 文字* */
35  var  layer  =  LayerUtil.createLayer( " <ul><li><a href='http://blog.163.com/chauvan0923/blog/static/433630200681104922238'>莫斯科有只我爱的鸭子</a></li><li><a href='http://blog.163.com/zoudezhende/blog/static/62269972006916363245'>一个手机营业员的忠告</a></li><li><a href='http://blog.163.com/yonghai1229/blog/static/1153502200691111259446'>新裤子乐队 超现实NEW WAVE</a></li><li><a href='http://blog.163.com/shwuxingsheng2008/blog/static/7155620068303112840'>被逼相亲30次 我和母亲斗智</a></li><li><a href='http://blog.163.com/5qingying/blog/static/30909320069473521812'>玉米的2种健康新吃法</a></li><li><a href='http://blog.163.com/hillcui/blog/static/15842992006979103650'>准妈妈的亲子游戏</a></li><li><a href='http://blog.163.com/jd1947/blog/static/8481222006917115731745'>小孙女绣的“幸福包”</a></li></ul> " );
36  /* * 图片* */
37  var  imgLayer  =  LayerUtil.createLayer( " <img src='http://bbs6.netease.com/ent_upimage/200404/1081422859.jpg' width='400'/> " );
38 
39  function  moveRandom()
40  {
41      imgLayer.setDisplay(  true  );
42       var  x  =   300 ;
43       var  y  =   200 ;
44       var  r  =   100 ;
45       var  d  =   0 ;
46       /* * 他爷爷的数学公式都忘记了！* */
47      window.setInterval
48      (
49           function ()
50          {
51              d ++ ;
52              x  =  Math.ceil( Math.cos(d)  *  r);
53              y  =  Math.ceil( Math.cos(d)  *  r);
54              imgLayer.moveLayer( x , y );
55          }
56          ,
57           50
58      );
59  }
60  </ script >
61  </ head >
62  < body >
63  < table  width ="80%"  align ="center" >
64       < tr >
65           < td  align ="center" >< input  type ="button"  value ="关闭文字层 layer"  onclick ="layer.closeLayer()" /></ td >
66           < td  align ="center" >< input  type ="button"  value ="关闭图片层 imgLayer"  onclick ="imgLayer.closeLayer()" /></ td >
67       </ tr >
68       < tr >
69           < td  height ="100"  align ="center"  colspan ="2" >
70               < input  type ="button"  value ="默认在中间显示层"  onclick ="layer.viewLayer( false )" /> &nbsp;&nbsp;&nbsp;
71               < input  type ="button"  value ="默认在中间显示层[使用渐显效果]"  onclick ="layer.viewLayer( true )"   />
72           </ td >
73       </ tr >
74       < tr >
75           < td  height ="100"  align ="center"  colspan ="2" >
76           < input  type ="button"  value ="在指定位置显示层 x = 0 y = 200"  onclick ="layer.viewLayer( false , 0 , 200)"   />
77           < input  type ="button"  value ="在指定位置显示层 x = 0 y = 200[使用渐显效果]"  onclick ="layer.viewLayer( true , 0 , 200)"   />
78           </ td >
79       </ tr >
80       < tr >
81           < td  height ="100"  align ="center"  colspan ="2" >
82           < input  type ="button"  value ="显示图片不错"  onclick ="imgLayer.viewLayer( false  , 0 , 200)"   />
83           < input  type ="button"  value ="显示图片不错[使用渐显效果]"  onclick ="imgLayer.viewLayer( true , 0 , 200)"   />
84           </ td >
85       </ tr >
86       < tr >
87           < td  height ="100"  align ="center"  colspan ="2" >
88           < input  type ="button"  value ="使用方式非常灵活"  onclick ="moveRandom()"   />
89           </ td >
90       </ tr >
91  </ table >
92  </ body >
93  </ html >
94 

源代码下载 ：

LayerUtil.rar

2KB

2006/10/18 0:11:25

LayerUtil.rar

2KB

2006/10/18 0:11:25

LayerUtil.rar

2KB

2006/10/18 0:11:25