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

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

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

关键字: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(http://yangjunwei.com/images/close.png) no-repeat right 6px; }

参与评论

游客评论不支持回复他人评论内容,如需回复他人评论内容请
  • 电脑人生

    支持下!!点点广告

    nuodou 于 2010-11-24 13:59:49 回复

    欢迎新童鞋!!

    8年前 (2010-11-24)
    回复
    回复电脑人生
  • tuzibaobei

    你好,我是兔子宝贝哦。博主最近忙不。有时间就回访。

    nuodou 于 2010-7-19 10:27:38 回复

    纯踩!

    9年前 (2010-07-18)
    回复
    回复tuzibaobei
  • 股票推荐

    很好。

    9年前 (2010-07-10)
    回复
    回复股票推荐
  • nuodou

    自个测试:那个关闭图标很雷人!竟然跟着第一条公告滚!!算了暂时就这样吧,想改的童鞋添加个层就行了!
    抛砖引玉了!

    9年前 (2010-07-05)
    回复
    回复nuodou