1、jquery，公告垂直滚动，可关闭特效：（全面版）
html
<divid="wenzilunbo"><divid="announcement_box"><divid="announcement"><ulstyle="margin-top:0px;"><li>公告滚动特效</li><li>公告滚动特效</li><li>公告滚动特效</li></ul></div><divclass="announcement_remove"><atitle="关闭"href="javascript:void(0)"onClick="$(#announcement_box).slideUp(slow);"><spanid="announcement_close">×</span></a></div></div></div>
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、公告垂直滚动特效代码（常用版）
<!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>滚动公告栏</title><scripttype="text/javascript"src="/libs/jquery/2.1.4/jquery.min.js"></script><styletype="text/css">*{margin:0;padding:0;}/*公告栏滚动CSS*/#callboard{width:600px;margin:100pxauto0;height:24px;line-height:24px;overflow:hidden;font-size:12px;background-color:#f5f5f5;}</style></head><body><divid="callboard"><ul><li><spanstyle="color:red;">公告[2]：前端组上线一个月零八天，PR升为3，BD权重1</span></li><li><spanstyle="color:red;">公告[3]：撤下了BloggerAds，原因为收入太少，打开速度慢！</span></li><li><ahref="">公告[1]：前端组主题正在整理中..有需要用的朋友请留个言，以方便及时通知！</a></li></ul></div><!--公告板滚动--><scripttype="text/javascript">(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);</script></body></html>
3、最简单的公告滚动，无动画效果的滚动（极简版本）
<!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><scripttype="text/javascript"src="/libs/jquery/2.1.4/jquery.min.js"></script><style>*{padding:0px;margin:0px;}ul{list-style:none;height:30px;overflow:hidden}li{line-height:30px;}</style></head><body><ul><li>1111</li><li>22222</li><li>3333</li><li>44444</li><li>5555</li><li>66666</li></ul><script>setInterval(function(){varnewList=$(ul:first).clone(true);$(ul).append(newList);$(ul:first).remove();},2000);</script></body></html>
div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式） – js/jQuery – 前端 css3 支持ie
