jquery实现公告翻滚效果
翻滚效果非常不错，代码也很简单，这里就不多废话了。
//样式文件：
<styletype="text/css">
*{
margin:0;
padding:0;
}
.scrollNews{
width:100%;
height:20px;
overflow:hidden;
background:#FFFFFF;
border:0pxsolid#AAAAAA;
}
.scrollNewsul{
padding:2px5px5px25px;
}
.scrollNewsulli{
height:20px;
list-style-type:none;
font-size:small;
}
a{
text-decoration:none;
}
</style>
头部js
别忘了导入jquery库
$(function(){
varsettime;
$(".scrollNews").hover(function(){
clearInterval(settime);
},function(){
settime=setInterval(function(){
var$first=$(".scrollNewsul:first"); //选取div下的第一个ul而不是li；
varheight=$first.find("li:first").height(); //获取第一个li的高度，为ul向上移动做准备；
$first.animate({"marginTop":-height+"px"},600,function(){
$first.css({marginTop:0}).find("li:first").appendTo($first);//设置上边距为零，为了下一次移动做准备
});
},3000);
}).trigger("mouseleave"); //trigger()方法的作用是触发被选元素的制定事件类型
});
jsp正文区
<divclass="scrollNews">
<imgwidth="20"height="15"src="img/laba.png"align="left">
<ul>
<li><aclass="tooltip"title="查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
<li><aclass="tooltip"title="查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告：从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
</ul>
</div>
小伙伴们自由发挥下，应用到自己的项目中吧