JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例
更新時間：2018年02月13日 11:55:25 作者：lexie
這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的文字間歇循環(huán)滾動效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>m.fzitv.net - 間歇循環(huán)滾動</title>
<style>
#box{
height:240px;
width:300px;
margin:0 auto;
border:1px solid #0066FF;
overflow:hidden;
padding-bottom:20px;
}
#box li{
color:#333;
height:24px;
}
#box ul{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<li>腳本之家1</li>
<li>腳本之家2</li>
<li>腳本之家3</li>
<li>腳本之家4</li>
<li>腳本之家5</li>
<li>腳本之家6</li>
<li>腳本之家7</li>
<li>腳本之家8</li>
<li>腳本之家9</li>
</ul>
</div>
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
area.scrollTop=0;
var delay=2000;
var speed=50;
var time;
function starMove(){
area.scrollTop++;
time=setInterval("scrollUp()",speed);
}
function scrollUp(){
if(area.scrollTop%liHeight==0){
clearInterval(time);
setTimeout("starMove()",delay);
}else{
area.scrollTop++;
if(area.scrollTop>=area.offsetHeight/2){
area.scrollTop=0;
}
}
}
setTimeout("starMove()",delay);
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了javascript中函數(shù)的寫法 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
Uploadify是JQuery的一個上傳插件，實現(xiàn)的效果非常不錯，帶進(jìn)度顯示。接下來通過本文給大家介紹Uploadify上傳文件方法，涉及到Uploadify在Aspnet中的使用相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友一起學(xué)習(xí)吧2016-03-03
微信小程序?qū)崿F(xiàn)文字長按復(fù)制與一鍵復(fù)制功能全過程
微信小程序開發(fā)是依托微信的,所以他的代碼是嵌入在微信的原始代碼之中的,這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)文字長按復(fù)制與一鍵復(fù)制功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于如何通過17道題讓你徹底理解JS中的類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
其實，一直想把自己寫的一些js給總結(jié)下，也許是能力有限不能把它完美結(jié)合起來。只能自己默默的看著哪些代碼，無能為力2011-10-10
在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時間格式實例
本篇文章主要介紹了在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時間格式實例，非常具有實用價值，需要的朋友可以參考下2017-05-05
echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標(biāo)簽formatter使用及餅圖自定義標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Javascript實現(xiàn)滾動圖片新聞的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章全面解析了Bootstrap排版使用方法，本文重點介紹Bootstrap標(biāo)題排版，感興趣的小伙伴們可以參考一下2015-11-11
console 是 JavaScript 提供的一個全局對象,常用于調(diào)試和日志記錄,它包含一組方法,用于在控制臺中打印消息、顯示數(shù)據(jù)以及調(diào)試程序,本文介紹js 中的console使用示例,感興趣的朋友一起看看吧2024-12-12