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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
简明json介绍
2008/09/28 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
语文教育专业求职信
2014/06/28 职场文书
委托书范本
2014/09/13 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers