翻滾效果非常不錯，代碼也很簡單，這裡就不多廢話了。
代碼如下:
//樣式文件：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scrollNews {
width: 100%;
height: 20px;
overflow: hidden;
background: #FFFFFF;
border: 0px solid #AAAAAA;
}
.scrollNews ul {
padding: 2px 5px 5px 25px;
}
.scrollNews ul li {
height: 20px;
list-style-type: none;
font-size: small;
}
a {
text-decoration: none;
}
</style>
頭部js
別忘了導入jquery庫
代碼如下:
$(function () {
var settime;
$(".scrollNews").hover(function () {
clearInterval(settime);
}, function () {
settime = setInterval(function () {
var $first = $(".scrollNews ul:first"); //選取div下的第一個ul 而不是li；
var height = $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正文區
代碼如下:
<div class="scrollNews">
<img width="20" height="15" src="img/laba.png" align="left">
<ul>
<li><a class="tooltip" title="查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.">
查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.</a>
</li>
<li><a class="tooltip" title="查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.">
查詢模塊菜單名稱更新公告：從2015-02-09開始,查詢模塊菜單使用新名稱,具體請參考下方【查詢模塊新舊名稱對照表】.</a>
</li>
</ul>
</div>
小伙伴們自由發揮下，應用到自己的項目中吧