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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Django视图扩展类知识点详解
2019/10/25 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
基于python3生成标签云代码解析
2020/02/18 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
abstract是什么意思
2012/02/12 面试题
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
国际商务专业求职信
2014/07/15 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
教师节祝酒词
2015/08/11 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android