脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现仿IE顶部的可关闭警告条

javascript实现仿IE顶部的可关闭警告条

 更新时间：2015年05月05日 10:03:32   投稿：hebedich  
仿windows IE顶部的敬告工具条，带关闭按钮，设计还算精美，你完全可以用到自己的网页用于显示提示等方面，有需要的小伙伴可以参考下。

功能非常实用，代码非常简单，就不多废话了，直接奉上：

<!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中的this使用详解

    JavaScript中的this使用详解

    this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。今天我们就来详细探讨下this的使用
    2016-07-07
  • BootStrap导航栏问题记录

    BootStrap导航栏问题记录

    这篇文章主要介绍了BootStrap导航栏问题记录,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-07-07
  • js将字符串转成正则表达式的实现方法

    js将字符串转成正则表达式的实现方法

    js将字符串转成正则表达式的实现方法。其实很简单哦！需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 怎样用JavaScript实现原型模式

    怎样用JavaScript实现原型模式

    这篇文章主要介绍了怎样用JavaScript实现原型模式，想学习设计模式的同学，可以参考下
    2021-04-04
  • 详解webpack性能优化——DLL

    详解webpack性能优化——DLL

    本篇文章主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS如何实现页面截屏功能实例代码

    JS如何实现页面截屏功能实例代码

    这篇文章主要给大家介绍了关于JS如何实现页面截屏功能的相关资料,文中主要利用了html2canvas和canvas绘制两个方法来实现,需要的朋友可以参考下
    2021-06-06
  • JS Object构造函数之Object.freeze

    JS Object构造函数之Object.freeze

    这篇文章主要介绍了JS Object构造函数之Object.freeze，对JS感兴趣的同学，可以深入了解下
    2021-04-04
  • 利用javascript判断文件是否存在

    利用javascript判断文件是否存在

    本篇文章主要介绍了利用javascript判断文件是否存在的方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • WEB前端实现裁剪上传图片功能

    WEB前端实现裁剪上传图片功能

    文件上传功能在各大网站经常会用到，今天小编通过本文给大家介绍了WEB前端实现裁剪上传图片功能的相关资料,需要的朋友可以参考下
    2016-10-10
  • P3P Header解决Cookie跨域的问题

    P3P Header解决Cookie跨域的问题

    P3P Header解决Cookie跨域的问题，需要的朋友可以参考一下
    2013-03-03

最新评论