把相应的信息放入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>
<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>
// 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>
/*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>
以上代码来自所谓刚子