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的朋友一点学习经验小结
Nov 23 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript触发器详解
2007/03/10 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python中的五种异常处理机制介绍
2014/09/02 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
python 调试冷知识(小结)
2019/11/11 Python
python实现粒子群算法
2020/10/15 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
python 对xml解析的示例
2021/02/27 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
服务员岗位责任制
2014/02/11 职场文书
《影子》教学反思
2014/02/21 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Python实现单例模式的5种方法
2021/06/15 Python