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学习笔记(九) js对象 设计模式
Jun 19 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
基于jquery实现图片放大功能
May 07 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
小程序调用微信支付的方法
Sep 26 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php构造函数的继承方法
2015/02/09 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python对文件的操作方法汇总
2020/02/28 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
国际贸易毕业生自荐书
2014/06/22 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
明星邀请函
2015/02/02 职场文书
期末个人总结范文
2015/02/13 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
转正申请报告格式
2015/05/15 职场文书
垂直极限观后感
2015/06/08 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
MySQL数据库事务的四大特性
2022/04/20 MySQL