jQuery实现上下轮播通知消息

把相应的信息放入li标签中就可以了,还带个小X关闭的按钮。
HTML结构如下

<code>
<div id="announcement_box">
        <div id="announcement">
            <ul>                                                         
                <li>
                            //添加自己的广播内容;
                             </li>
            </ul>
        </div>
        <div class="announcement_remove">
            <a title="关闭" href="javascript:void(0)" onclick="$('#announcement_box').slideUp('slow');">
                <span id="announcement_close">×</span>
            </a>
    </div>
</div>
</code>

jQuery 代码

<code>
             // announcement scroll
            function AutoScroll(obj){ 
            $(obj).find("ul:first").animate({ 
                marginTop:"-25px" 
            },500,function(){ 
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
                }); 
        } 
            $(document).ready(function() {
                        var myar = setInterval('AutoScroll("#announcement")', 3600)
                        $("#announcement").hover(function() { clearInterval(myar); }, 
            function() { myar = setInterval('AutoScroll("#announcement")', 3600) });
                    });
</code>

至于CSS样式,自行修改添加了。
以下是所谓刚子主题上的CSS样式

<code>
/*announcement 通知*/
#announcement_box { border:1px dashed #C1C0AB; border-radius:2px; padding-left:10px; top:42px; width:674px;height:35px;margin-bottom: 15px;}
#announcement {background:url(images/notice_icon.png) no-repeat 0px 12px; height:25px; line-height:25px; overflow: hidden; padding: 5px 10px 5px 20px; float:left;}
#announcement a {color:#000;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:5px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 \9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}
</code>

以上代码来自所谓刚子

0 thoughts on “jQuery实现上下轮播通知消息
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。