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>www.dhdzp.com - 間歇循環(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ù)的寫法實例代碼詳解
這篇文章主要介紹了javascript中函數(shù)的寫法 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-10-10
Uploadify上傳文件方法
Uploadify是JQuery的一個上傳插件，實現(xiàn)的效果非常不錯，帶進度顯示。接下來通過本文給大家介紹Uploadify上傳文件方法，涉及到Uploadify在Aspnet中的使用相關(guān)知識，本文介紹的非常詳細，具有參考借鑒價值，需要的朋友一起學(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
17道題讓你徹底理解JS中的類型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于如何通過17道題讓你徹底理解JS中的類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
簡單的前端js+ajax 購物車框架(入門篇)
其實，一直想把自己寫的一些js給總結(jié)下，也許是能力有限不能把它完美結(jié)合起來。只能自己默默的看著哪些代碼，無能為力
2011-10-10
在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時間格式實例
本篇文章主要介紹了在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時間格式實例，非常具有實用價值，需要的朋友可以參考下
2017-05-05
echarts餅圖標簽formatter使用及餅圖自定義標簽
項目中有遇到需要使用餅圖展示每種狀態(tài)所占比例,去echarts官網(wǎng)學(xué)習(xí)了一番,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖標簽formatter使用及餅圖自定義標簽的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Javascript實現(xiàn)滾動圖片新聞的實例代碼
這篇文章主要介紹了Javascript實現(xiàn)滾動圖片新聞的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
全面解析Bootstrap排版使用方法（標題）
這篇文章全面解析了Bootstrap排版使用方法，本文重點介紹Bootstrap標題排版，感興趣的小伙伴們可以參考一下
2015-11-11
js 中的console使用示例詳解
console 是 JavaScript 提供的一個全局對象,常用于調(diào)試和日志記錄,它包含一組方法,用于在控制臺中打印消息、顯示數(shù)據(jù)以及調(diào)試程序,本文介紹js 中的console使用示例,感興趣的朋友一起看看吧
2024-12-12