• Register

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

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

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

关键字: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; }
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/458.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 

4 条评论 »

  • 电脑人生
    2010/11/24 at 12:20:47

    支持下!!点点广告

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

    欢迎新童鞋!!

  • tuzibaobei
    2010/07/18 at 18:29:17

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

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

    纯踩!

  • 股票推荐
    2010/07/10 at 07:25:53

    很好。

  • nuodou
    2010/07/05 at 09:46:06

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

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册