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