纯JavaScript实现的完美渐变弹出层效果代码


Posted in Javascript onApril 02, 2010

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

最终效果图:
纯JavaScript实现的完美渐变弹出层效果代码
Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 #Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 #Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 #Javascript
You might like
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python opencv之分水岭算法示例
2018/02/24 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python生成特定分布数的实例
2019/12/05 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Django数据库操作之save与update的使用
2020/04/01 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
百度软件工程师职位
2013/02/14 面试题
银行自荐信范文
2015/03/25 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
vue自定义右键菜单之全局实现
2022/04/09 Vue.js