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中消除闭包的一般方法介绍
Mar 16 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
js实现有趣的倒计时效果
Jan 19 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php Session存储到Redis的方法
2013/11/04 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
javascript 一些用法小结
2009/09/11 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
jquery replace方法去空格
2017/05/08 jQuery
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
python实现探测socket和web服务示例
2014/03/28 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Python自定义线程类简单示例
2018/03/23 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
pandas 选择某几列的方法
2018/07/03 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
春季防火方案
2014/05/10 职场文书
学年个人总结范文
2015/03/05 职场文书
python之基数排序的实现
2021/07/26 Python