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 17 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 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
消息持续发送的完整例子
2006/10/09 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
javaScript语法总结
2016/11/25 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
python绘制多个曲线的折线图
2020/03/23 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Django接收自定义http header过程详解
2019/08/23 Python
详解python 中in 的 用法
2019/12/12 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
公司离职证明范本
2014/01/13 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
委托书模板
2014/04/04 职场文书
对祖国的寄语大全
2014/04/11 职场文书
大学副班长竞选稿
2015/11/21 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js