快捷導(dǎo)航

JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例

更新時(shí)間：2018年02月13日 11:55:25 作者：lexie

這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果。分享給大家供大家參考，具體如下：

先來(lái)看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>www.fzitv.net - 間歇循環(huán)滾動(dòng)</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錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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