js不間斷滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)
更新時(shí)間：2016年06月03日 16:51:51 投稿：jingxian
下面小編就為大家?guī)硪黄猨s不間斷滾動(dòng)的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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)文章
需求：JSP網(wǎng)頁(yè)中要顯示pdf文件,下面給出二種方案，JS插件那種不錯(cuò)啊2013-12-12
動(dòng)態(tài)加載js、css的實(shí)例代碼
這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
Proxy是es2015 標(biāo)準(zhǔn)規(guī)范加入的語(yǔ)法，很可能你只是聽說過，但并沒有用過，畢竟考慮到兼容的問題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個(gè)瀏覽器的更新迭代，Proxy的支持度也越來越高：而且使用Proxy進(jìn)行代理和劫持，也漸漸成為了趨勢(shì)。2021-05-05
JSON是一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包，下面有個(gè)示例，大家可以參考下2014-04-04
js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法
JS數(shù)據(jù)格式化是在進(jìn)行web前端開發(fā)時(shí)常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
很多前端只會(huì)謝謝頁(yè)面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語(yǔ)句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript add event remove event
javascript事件綁定和刪除功能代碼2008-04-04
JavaScript中動(dòng)態(tài)向表格添加數(shù)據(jù)
本文給大家分享使用原生javascript實(shí)現(xiàn)動(dòng)態(tài)向表格中添加數(shù)據(jù)的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
一步一步封裝自己的HtmlHelper組件BootstrapHelper（三）
一步一步封裝自己的HtmlHelper組件：BootstrapHelper，系列文章第三篇，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序之側(cè)邊欄滑動(dòng)實(shí)現(xiàn)過程解析（附完整源碼）
這篇文章主要介紹了微信小程序之側(cè)邊欄滑動(dòng)實(shí)現(xiàn)過程解析（附完整源碼）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08