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代码小结
Aug 01 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS实现合并json对象的方法
2017/10/10 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
使用python实现个性化词云的方法
2017/06/16 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
如何清空python的变量
2020/07/05 Python
python实现自动打卡的示例代码
2020/10/10 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
管理科学大学生求职信
2013/11/13 职场文书
新教师工作感言
2014/02/16 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python