为滚动公告栏添加关闭效果-显示隐藏层

前两天把博客整合滚动公告的方法发布出来(请移步:为博客首页添加滚动公告栏 [兼容主流浏览器]),有童鞋非常想要个关闭这个公告的效果!这两天太热,晚上睡不好头晕,没能及时写个教程,不好意思了哈!

其实想将此滚动公告加个关闭按钮的方法很多,我这里用个简单的,就是利用显示隐藏层的方法来实现!

关键字:show, hide, display。

原滚动公告代码的基础上,添加如下Js代码,不做多的解释了。

<script language="javascript" type="text/javascript">
function ann_hide(divName){
	document.getElementById(divName).style.display = "none";
}
function ann_show(divName){
	document.getElementById(divName).style.display = "";
}
</script>

接下来就是点击按钮以实现显示隐藏层了,同样在原滚动公告代码的基础上,将

<div id="webann">

替换成

<div id="webann" onclick="ann_hide('webann')">

到此,已经达到了关闭此滚动公告的目的了!

没看到按钮,点哪里才能关闭公告?答案是:我晕,你点公告框就行!

如果非想要个关闭的图标,好吧,在原滚动公告代码的基础上,添加一下样式如下:

#ann_marqueebox { background:url(https://yangjunwei.com/images/close.png) no-repeat right 6px; }