网站公告栏一般采用滚动形式，随着jquery的出现，特效做起来更加简单，所以目前大多数网站都有自己的公告栏目，采用文字滚动的形式，今天来分享几个垂直公告文字滚动特效，分别是全面版，常用版，以及极简版！
1、jquery，公告垂直滚动，可关闭特效：(全面版)
html
公告滚动特效公告滚动特效公告滚动特效×
CSS：#wenzilunbo{width:1100px;margin:-34pxauto30px;overflow:hidden}
#announcement_box{/*position:absolute;top:60px;background-color:rgba(240,239,215,0.5);background-color:#E3DEC0\9;border:1pxdashed#407864;*/border-radius:2px;width:1100px;max-height:24px;}
#announcement{margin-left:10px;background:url(images/notice_icon.png)leftcenterno-repeatscroll;height:24px;line-height:24px;overflow:hidden;padding:0px0px0px20px;float:left;}
#announcementa{color:#282828;}
#announcementa:hover{color:#94382B;}
.announcement_remove{padding:0px10px;float:right;font-size:14px;}
.announcement_removea{height:18px;width:18px;display:block;line-height:16px;margin:4px03px0;margin:10px03px0\9;text-align:center;}
.announcement_removea:hover{background-color:#cdc8a0;box-shadow:1px1px1px#66614cinset;-webkit-box-shadow:1px1px1px#666inset;-moz-box-shadow:1px1px1px#666inset;border-radius:3px;}
#announcement_close{color:#666;}
#announcementspan{color:#666;}
jquery：functionAutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},100,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
jQuery(function($){
$(document).ready(function(){
setInterval('AutoScroll("#announcement")',4000)
});
});
2、公告垂直滚动特效代码(常用版)
滚动公告栏
>
*{margin:0;padding:0;}
/*公告栏滚动CSS*/
#callboard{width:600px;margin:100pxauto0;height:24px;line-height:24px;overflow:hidden;font-size:12px;background-color:#f5f5f5;}
公告[2]：前端组上线一个月零八天，PR升为3，BD权重1公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！
">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！
(function(win){
varcallboarTimer;
varcallboard=$('#callboard');
varcallboardUl=callboard.find('ul');
varcallboardLi=callboard.find('li');
varliLen=callboard.find('li').length;
varinitHeight=callboardLi.first().outerHeight(true);
win.autoAnimation=function(){
if(liLen<=1)return;
varself=arguments.callee;
varcallboardLiFirst=callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
},500,function(){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer=setTimeout(self,500);
});
}
callboard.mouseenter(
function(){
clearTimeout(callboarTimer);
}).mouseleave(function(){
callboarTimer=setTimeout(win.autoAnimation,5000);
});
}(window));
setTimeout(window.autoAnimation,5000);
3、最简单的公告滚动，无动画效果的滚动(极简版本)
无标题文档
*{padding:0px;margin:0px;}
ul{list-style:none;height:30px;overflow:hidden}
li{line-height:30px;}
111122222333344444555566666
setInterval(function(){
varnewList=$('ul:first').clone(true);
$('ul').append(newList);
$('ul:first').remove();
},2000);
html语言字体上下滚动代码 div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...
