为滚动公告栏添加关闭效果-显示隐藏层
前两天把博客整合滚动公告的方法发布出来(请移步:为博客首页添加滚动公告栏 [兼容主流浏览器]),有童鞋非常想要个关闭这个公告的效果!这两天太热,晚上睡不好头晕,没能及时写个教程,不好意思了哈!
其实想将此滚动公告加个关闭按钮的方法很多,我这里用个简单的,就是利用显示隐藏层的方法来实现!
关键字: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; }