快捷導(dǎo)航

純JavaScript實(shí)現(xiàn)的完美漸變彈出層效果代碼

更新時(shí)間：2010年04月02日 22:03:17 作者：

對于Web項(xiàng)目開發(fā)尤其是前臺UI的設(shè)計(jì)而言，用戶體驗(yàn)至關(guān)重要，因?yàn)樗苯雨P(guān)系到項(xiàng)目的成敗，簡潔，平滑，優(yōu)雅的設(shè)計(jì)永遠(yuǎn)能夠受到用戶的青睞。

如題，本文將使用純粹的腳本JavaScript實(shí)現(xiàn)漸變的彈出層，其想法也非常簡單：利用IFrame實(shí)現(xiàn)遮蓋，再借助一個(gè)DIV用于展現(xiàn)彈出層的內(nèi)容，最后再使用其內(nèi)置函數(shù)setInterval()和clearInterval()實(shí)現(xiàn)漸變，原理非常簡單，只不過要注意對DOM對象/元素的精確控制。由于代碼比較簡單，在此就不再贅述。以下代碼在IE6+,FF3.5+測試通過。
腳本Flyout.js:

復(fù)制代碼代碼如下:

 
// JScript File 
if (navigator.userAgent.toLowerCase().indexOf('msie') > -1) { 
window.isIE = true; 
window.isIE6 = navigator.appVersion.indexOf("MSIE 6.0;") > -1; 
window.isIE7 = navigator.appVersion.indexOf("MSIE 7.0;") > -1; 
window.isIE8 = navigator.appVersion.indexOf("MSIE 8.0;") > -1; 
} 
var $ = function(objID) { return document.getElementById(objID) }; 
var _flyout; 
var _fadeTimer; 
function showflyout(divWidth, divHeight, paddingWidth) { 
var flyout = function() { 
} 
flyout.prototype = { 
clientWidth: document.documentElement.clientWidth, 
clientHeight: document.documentElement.clientHeight, 
scrollWidth: document.documentElement.scrollWidth, 
scrollHeight: document.documentElement.scrollHeight, 
iframeID: "envelopIframe", 
divID: "popupcontent", 
iframebgColor: "#888888", 
show: function(divContent) { 
//Create envelop iframe 
cssText = "position:absolute; z-index:100; background-color:#888888; border-width:0px; filter:alpha(opacity=0); opacity:0.0;"; 
cssText += "left:0px;"; 
cssText += "top:0px;"; 
cssText += "width:" + this.scrollWidth + "px;"; 
cssText += "height:" + this.scrollHeight + "px;"; 
this.create("iframe", this.iframeID, cssText, "Cppl_IFrameSrc.htm", ""); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, true) }, 5); 
//Create flyout 
var cssText = ""; 
cssText += "display:block; _position:absolute; position:fixed; z-index:101; border:solid 1px Gray; background-color:white;"; 
cssText += "left:" + (this.clientWidth - divWidth - paddingWidth) / 2 + "px;"; 
cssText += "top:" + (this.clientHeight - divHeight - paddingWidth) / 2 + "px;"; 
cssText += "width:" + (divWidth + paddingWidth) + "px;"; 
cssText += "height: " + (divHeight + paddingWidth) + "px;"; 
this.create("div", this.divID, cssText, "", divContent); 
}, 
create: function(type, id, csstext, iframesrc, innerhtml) { 
var obj = document.createElement(type); 
if (iframesrc.length > 0) { 
obj.src = iframesrc; 
} 
obj.setAttribute("id", id); 
obj.style.cssText = csstext; 
if (innerhtml.length > 0) { 
obj.innerHTML = innerhtml; 
} 
document.body.appendChild(obj); 
if (iframesrc.length > 0) { 
if (window.isIE) { 
window.envelopIframe.document.bgColor = this.iframebgColor; 
} 
} 
}, 
close: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
document.body.removeChild(objIframe); 
document.body.removeChild(objDiv); 
} 
}, 
onresize: function() { 
var objIframe = document.getElementById(this.iframeID); 
var objDiv = document.getElementById(this.divID); 
if (objIframe && objDiv) { 
objIframe.style.width = document.documentElement.scrollWidth + "px"; 
objIframe.style.height = document.documentElement.scrollHeight + "px"; 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + "px"; 
} 
}, 
onscroll: function() { 
var objDiv = document.getElementById(this.divID); 
if (objDiv) { 
objDiv.style.left = (document.documentElement.clientWidth - divWidth) / 2 + document.documentElement.scrollLeft + "px"; 
objDiv.style.top = (document.documentElement.clientHeight - divHeight) / 2 + document.documentElement.scrollTop + "px"; 
} 
} 
}; 
_flyout = new flyout(); 
_flyout.show("This is a flyout.<div onclick=\"javascript:closeflyout()\">Close Flyout</div>"); 
} 
function closeflyout() { 
clearInterval(_fadeTimer); 
_fadeTimer = setInterval(function() { fadeIframe("envelopIframe", 0.05, 0, 0.5, false) }, 5); 
} 
window.onresize = function() { 
if (_flyout) { 
_flyout.onresize(); 
} 
}; 
window.onscroll = function() { 
if (_flyout && isIE6) { 
_flyout.onscroll(); 
} 
}; 
function fadeIframe(objId, speed, minOpacity, maxOpacity, flag) { 
var dialog = $(objId); 
if (dialog) { 
var value; 
if (flag) { 
if (parseFloat(dialog.style.opacity) <= maxOpacity) { 
value = parseFloat(dialog.style.opacity) + speed; 
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')'; 
dialog.style.opacity = '' + value + ''; 
} 
else { 
clearInterval(_fadeTimer); 
} 
} 
else { 
if (parseFloat(dialog.style.opacity) >= minOpacity) { 
value = parseFloat(dialog.style.opacity) - speed; 
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')'; 
dialog.style.opacity = '' + value + ''; 
} 
else { 
clearInterval(_fadeTimer); 
if (_flyout) { 
_flyout.close(); 
} 
} 
} 
} 
} 

調(diào)用ASPX代碼:

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!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 id="Head1" runat="server"> 
<title>Flyout Sample</title> 
<script type="text/javascript" src="Flyout.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<div onclick="javascript:showflyout(700, 300, 10);"> 
Click me to test 
</div> 
<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 /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
</div> 
</form> 
</body> 
</html> 