JAVA & XML & JAVASCRIPT & AJAX & CSS

Web 2.0 技术储备............

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  77 随笔 :: 17 文章 :: 116 评论 :: 0 Trackbacks
 1 /**
 2 *作者 :Fantasy
 3 *Email: fantasycs@163.com
 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
  
posted on 2006-10-18 00:14 Web 2.0 技术资源 阅读(5863) 评论(2)  编辑  收藏 所属分类: Javascript

评论

# re: [原创]一个精巧的层控制工具 LayerUtil ....希望能满足大家的基本需求 [Javascript] 2006-10-18 08:14 坏男孩
强烈的顶一下了!  回复  更多评论
  

# re: [原创]一个精巧的层控制工具 LayerUtil ....希望能满足大家的基本需求 [Javascript] 2006-10-18 14:17 123bingbing
增开7群,号码 30440732
8群 30756649
9群 30178567
10群 28694497

我们的qq群:15096318 学习程序的都可以来  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: