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 )"/>
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
源代码下载 ：