//樣式文件：
<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>

?

轉載于:https://www.cnblogs.com/azhqiang/p/4287696.html

總結

以上是生活随笔為你收集整理的jquery实现上线翻滚效果公告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。