js不間斷滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)
更新時(shí)間：2016年06月03日 16:51:51 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js不間斷滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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>這是公告標(biāo)題的第一行</li>
<li>這是公告標(biāo)題的第二行</li>
<li>這是公告標(biāo)題的第三行</li>
<li>這是公告標(biāo)題的第四行</li>
<li>這是公告標(biāo)題的第五行</li>
<li>這是公告標(biāo)題的第六行</li>
<li>這是公告標(biāo)題的第七行</li>
<li>這是公告標(biāo)題的第八行</li>
</ul>
</div>
以上這篇js不間斷滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 如何生成不重復(fù)的隨機(jī)數(shù)
javascript 如何生成不重復(fù)的隨機(jī)數(shù)...2007-11-11
TypeScript(簡(jiǎn)稱 TS)和JavaScript(簡(jiǎn)稱 JS)都是用于編寫Web應(yīng)用程序的語(yǔ)言,下面這篇文章主要給大家介紹了關(guān)于JS與TS的主要區(qū)別,需要的朋友可以參考下2024-03-03
寫js時(shí)遇到的一些小問(wèn)題,需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了ES6中Iterator與for..of..遍歷用法,結(jié)合實(shí)例形式分析了ES6中Iterator的概念、用法及for..of..遍歷的使用技巧,需要的朋友可以參考下2017-03-03
JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法,可實(shí)現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06
JS對(duì)象轉(zhuǎn)換為Jquery對(duì)象示例
JS對(duì)象轉(zhuǎn)換為Jquery對(duì)象的方便在于可以使用jquery的一些方法，下面有個(gè)示例，大家可以參考下2014-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript通過(guò)mouseover()實(shí)現(xiàn)圖片變大效果的示例
下面小編就為大家分享一篇JavaScript通過(guò)mouseover()實(shí)現(xiàn)圖片變大效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-12-12