纯JavaScript实现完美渐变弹出层

　　前言：对于Web项目开发尤其是前台UI的设计而言，用户体验至关重要，因为它直接关系到项目的成败，简洁，平滑，优雅的设计永远能够受到用户的青睐。

如题，本文将使用纯粹的脚本JavaScript实现渐变的弹出层，其想法也非常简单：利用IFrame实现遮盖，再借助一个DIV用于展现弹出层的内容，最后再使用其内置函数setInterval()和clearInterval()实现渐变，原理非常简单，只不过要注意对DOM对象/元素的精确控制。由于代码比较简单，在此就不再赘述。以下代码在IE6+,FF3.5+测试通过。

脚本Flyout.js:

代码

1 // JScript File
 2 if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
 3 window.isIE = true;
 4 window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1;
 5 window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1;
 6 window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1;
 7 }
 8 var $ = function(objID) { return document.getElementById(objID) };
 9 var _flyout;
10 var _fadeTimer;
11 function showflyout(divWidth, divHeight, paddingWidth) {
12 var flyout = function() {
13 }
14 flyout.prototype = {
15 clientWidth: document.documentElement.clientWidth,
16 clientHeight: document.documentElement.clientHeight,
17 scrollWidth: document.documentElement.scrollWidth,
18 scrollHeight: document.documentElement.scrollHeight,
19 iframeID: "envelopIframe",
20 divID: "popupcontent",
21 iframebgColor: "#888888",
22 show: function(divContent) {
23 //Create envelop iframe
24 cssText = "position:absolute; z-index:100; background-color:#888888; border-width:0px; filter:alpha(opacity=0); opacity:0.0;";
25 cssText += "left:0px;";
26 cssText += "top:0px;";
27 cssText += "width:" + this.scrollWidth + "px;";
28 cssText += "height:" + this.scrollHeight + "px;";
29 this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", "");
30 _fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5);
31 //Create flyout
32 var cssText = "";
33 cssText += "display:block; _position:absolute; position:fixed; z-index:101; border:solid 1px Gray; background-color:white;";
34 cssText += "left:" + (this.clientWidth - divWidth - paddingWidth) / 2 + "px;";
35 cssText += "top:" + (this.clientHeight - divHeight - paddingWidth) / 2 + "px;";
36 cssText += "width:" + (divWidth + paddingWidth) + "px;";
37 cssText += "height: " + (divHeight + paddingWidth) + "px;";
38 this.create("div", this.divID, cssText, "", divContent);
39 },
40 create: function(type, id, csstext, iframesrc, innerhtml) {
41 var obj = document.createElement(type);
42 if (iframesrc.length > 0) {
43 obj.src = iframesrc;
44 }
45 obj.setAttribute("id", id);
46 obj.style.cssText = csstext;
47 if (innerhtml.length > 0) {
48 obj.innerHTML = innerhtml;
49 }
50 document.body.appendChild(obj);
51 if (iframesrc.length > 0) {
52 if (window.isIE) {
53 window.envelopIframe.document.bgColor = this.iframebgColor;
54 }
55 }
56 },
57 close: function() {
58 var objIframe = document.getElementById(this.iframeID);
59 var objDiv = document.getElementById(this.divID);
60 if (objIframe && objDiv) {
61 document.body.removeChild(objIframe);
62 document.body.removeChild(objDiv);
63 }
64 },
65 onresize: function() {
66 var objIframe = document.getElementById(this.iframeID);
67 var objDiv = document.getElementById(this.divID);
68 if (objIframe && objDiv) {
69 objIframe.style.width = document.documentElement.scrollWidth + "px";
70 objIframe.style.height = document.documentElement.scrollHeight + "px";
71 objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + "px";
72 objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + "px";
73 }
74 },
75 onscroll: function() {
76 var objDiv = document.getElementById(this.divID);
77 if (objDiv) {
78 objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + document.documentElement.scrollLeft + "px";
79 objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + document.documentElement.scrollTop + "px";
80 }
81 }
82 };
83 _flyout = new flyout();
84 _flyout.show("This is a flyout.<div onclick=\"javascript:closeflyout()\">Close Flyout</div>");
85 }
86 function closeflyout() {
87 clearInterval(_fadeTimer);
88 _fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5);
89 }
90 window.onresize = function() {
91 if (_flyout) {
92 _flyout.onresize();
93 }
94 };
95 window.onscroll = function() {
96 if (_flyout && isIE6) {
97 _flyout.onscroll();
98 }
99 };
100 function fadeIframe(objId, speed, minOpacity, maxOpacity, flag) {
101 var dialog = $(objId);
102 if (dialog) {
103 var value;
104 if (flag) {
105 if (parseFloat(dialog.style.opacity) <= maxOpacity) {
106 value = parseFloat(dialog.style.opacity) + speed;
107 dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
108 dialog.style.opacity = '' + value + '';
109 }
110 else {
111 clearInterval(_fadeTimer);
112 }
113 }
114 else {
115 if (parseFloat(dialog.style.opacity) >= minOpacity) {
116 value = parseFloat(dialog.style.opacity) - speed;
117 dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
118 dialog.style.opacity = '' + value + '';
119 }
120 else {
121 clearInterval(_fadeTimer);
122 if (_flyout) {
123 _flyout.close();
124 }
125 }
126 }
127 }
128 }

调用ASPX代码:

代码

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head id="Head1" runat="server">
6 <title>Flyout Sample</title>
7
8 <script type="text/javascript" src="Flyout.js"></script>
9
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div>
14 <div onclick="javascript:showflyout(700, 300, 10);">
15 Click me to test
16 </div>
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 </div>
76 </form>
77 </body>
78 </html>

最终效果图：

posted @ 2010-04-02 15:52 舍长阅读(746) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

成功不需要美学

纯JavaScript实现完美渐变弹出层

公告