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 31 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python去除所有html标签的方法
2015/05/05 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python 自由定制表格的实现示例
2020/03/20 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python如何生成xml文件
2020/06/04 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
管理科学大学生求职信
2013/11/13 职场文书
安全生产演讲稿
2014/05/09 职场文书
大专学生求职自荐信
2014/07/06 职场文书
写给女朋友的保证书
2015/05/09 职场文书
使用python绘制横竖条形图
2022/04/21 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python