js不間斷滾動的簡單實現(xiàn)
更新時間：2016年06月03日 16:51:51 投稿：jingxian
下面小編就為大家?guī)硪黄猨s不間斷滾動的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
CSS：
ul, li {
margin: 0;
padding: 0;
}
#scrollDiv {
width: 300px;
height: 25px;
line-height: 25px;
border-bottom: #4c8cd1 1px solid;
overflow: hidden;
}
#scrollDiv li {
height: 25px;
padding-left: 10px;
}
JS：
<script>
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 800, function () {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function () {
setInterval('AutoScroll("#scrollDiv")', 3000)
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
HTML：
<div id="scrollDiv">
<ul>
<li>這是公告標題的第一行</li>
<li>這是公告標題的第二行</li>
<li>這是公告標題的第三行</li>
<li>這是公告標題的第四行</li>
<li>這是公告標題的第五行</li>
<li>這是公告標題的第六行</li>
<li>這是公告標題的第七行</li>
<li>這是公告標題的第八行</li>
</ul>
</div>
以上這篇js不間斷滾動的簡單實現(xiàn)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
javascript 如何生成不重復的隨機數(shù)...2007-11-11
TypeScript(簡稱 TS)和JavaScript(簡稱 JS)都是用于編寫Web應用程序的語言,下面這篇文章主要給大家介紹了關于JS與TS的主要區(qū)別,需要的朋友可以參考下2024-03-03
寫js時遇到的一些小問題,需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了ES6中Iterator與for..of..遍歷用法,結合實例形式分析了ES6中Iterator的概念、用法及for..of..遍歷的使用技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS實現(xiàn)側懸浮浮動實例代碼，有需要的朋友可以參考一下2013-11-11
很多網(wǎng)站都涉及到輸入日期選項，如果客戶日期輸入錯誤，可能導入查詢不到甚至查詢到錯誤的信息，為了更好的滿足用戶需求，需要對日期進行校驗，下面給大家介紹使用純javascript如何判斷查詢日期是否為有效日期，需要的朋友可以參考下2015-08-08
JS實現(xiàn)iframe編輯器光標位置插入內容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實現(xiàn)iframe編輯器光標位置插入內容的方法,可實現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06
JS對象轉換為Jquery對象的方便在于可以使用jquery的一些方法，下面有個示例，大家可以參考下2014-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單放大鏡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript通過mouseover()實現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過mouseover()實現(xiàn)圖片變大效果的示例，具有很好的參考價值，希望對大家有所幫助2017-12-12