javascript实现仿IE顶部的可关闭警告条


Posted in Javascript onMay 05, 2015

功能非常实用,代码非常简单,就不多废话了,直接奉上:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿IE顶部的警告条,可以关闭</title>
<style type="text/css">
#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: lightyellow;
border-bottom: 1px solid black;
font: bold 12px Verdana;
}
* html #informationbar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
</style>
<script type="text/javascript">
function informationbar(){
this.displayfreq="always"
this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px"

/></a>'
}
informationbar.prototype.setContent=function(data){
this.content=this.content+data
document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')
}
informationbar.prototype.animatetoview=function(){
var barinstance=this
if (parseInt(this.barref.style.top)<0){
this.barref.style.top=parseInt(this.barref.style.top)+5+"px"
setTimeout(function(){barinstance.animatetoview()}, 50)
}
else{
if (document.all && !window.XMLHttpRequest)
this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')
else
this.barref.style.top=0
}
}
informationbar.close=function(){
document.getElementById("informationbar").style.display="none"
if (this.displayfreq=="session")
document.cookie="infobarshown=1;path=/"
}
informationbar.prototype.setfrequency=function(type){
this.displayfreq=type
}
informationbar.prototype.initialize=function(){
if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){
this.barref=document.getElementById("informationbar")
this.barheight=parseInt(this.barref.offsetHeight)
this.barref.style.top=this.barheight*(-1)+"px"
this.animatetoview()
}
}
window.onunload=function(){
this.barref=null
}
</script>
<script type="text/javascript">
<!--Invocation code-->
var infobar=new informationbar()
infobar.setContent('敬告:明天中午12点天降钱雨,请备好麻袋!  <a href="#">购买麻袋</a><a href="#">购买麻袋</a>')
infobar.initialize()
</script>
</head>
<body>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
js单例模式的两种方案
Oct 22 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 #Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 #Javascript
jquery实现图片随机排列的方法
May 04 #Javascript
jquery实现的美女拼图游戏实例
May 04 #Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python中new方法的详解
2019/01/15 Python
python实现猜数游戏
2020/03/27 Python
Python如何进行时间处理
2020/08/06 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
介绍一下linux文件系统分配策略
2012/11/17 面试题
见习期自我鉴定
2013/11/07 职场文书
图书室管理制度
2014/01/19 职场文书
函授药学自我鉴定
2014/02/07 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
初中语文教学反思范文
2016/03/03 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
MySql开发之自动同步表结构
2021/05/28 MySQL