这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
如题,本文将使用纯粹的脚本 JavaScript 实现渐变的弹出层,其想法也非常简单:利用 IFrame 实现遮盖,再借助一个 DIV 用于展现弹出层的内容,最后再使用其内置函数 setInterval() 和 clearInterval() 实现渐变,原理非常简单,只不过要注意对 DOM 对象 / 元素的精确控制。由于代码比较简单,在此就不再赘述。以下代码在 IE6+,FF3.5 + 测试通过。
对于 web 项目开发尤其是前台 UI 的设计而言,用户体验至关重要,因为它直接关系到项目的成败,简洁,平滑,优雅的设计永远能够受到用户的青睐。
脚本 Flyout.js:
- // 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();
- }
- }
- }
- }
- }
调用 ASPX 代码:
- <%@ 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>
最终效果图:
来源: http://www.phperz.com/article/17/0427/285219.html