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 相关文章推荐
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
webpack项目使用eslint建立代码规范实现
May 16 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python中pillow知识点学习
2018/04/30 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
护士实习鉴定范文
2013/12/22 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
公司授权委托书范本
2014/04/03 职场文书
自我管理的活动方案
2014/08/25 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
法律意见书范文
2015/06/04 职场文书
创业计划书之酒吧
2019/12/02 职场文书