快捷導(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>chabaoo.cn - 間歇循環(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)文章

通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置
position 屬性規(guī)定元素的定位類型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
完美解決spring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問題
下面小編就為大家?guī)?lái)一篇完美解決spring websocket自動(dòng)斷開連接再創(chuàng)建引發(fā)的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
小程序wx.getUserProfile接口的具體使用
最近微信小程序?qū)τ趯徍诵〕绦蛱岢隽藥в衱x.login、wx.getUserInfo接口的調(diào)整，并提出了一個(gè)新的接口供開發(fā)者調(diào)用，本文就詳細(xì)的介紹一下如何使用，感興趣的可以了解一下
2021-06-06
實(shí)例講解使用原生JavaScript處理AJAX請(qǐng)求的方法
這篇文章主要介紹了實(shí)例講解使用原生JavaScript處理AJAX請(qǐng)求的方法,這樣就算是利用原生API而脫離了jQuery中的Ajax方法,需要的朋友可以參考下
2016-05-05
手把手教你實(shí)現(xiàn)一個(gè)JavaScript時(shí)間軸組件
本文主要是給大家?guī)?lái)一個(gè)時(shí)間軸的組件開發(fā)教程，其主要功能就是可以拖動(dòng)時(shí)間軸來(lái)定位當(dāng)前時(shí)間，可以通過(guò)鼠標(biāo)滾輪來(lái)修改當(dāng)前時(shí)間分辨率，需要的可以參考一下
2022-10-10
[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解
下面小編就為大家?guī)?lái)一篇[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
使用pcs api往免費(fèi)的百度網(wǎng)盤上傳下載文件的方法
百度個(gè)人云盤空間大，完全免費(fèi)，而且提供了pcs api供調(diào)用操作文件，在平時(shí)的項(xiàng)目里往里面保存一些文件是很實(shí)用的。通過(guò)本文給大家介紹使用pcs api往免費(fèi)的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
JavaScript 學(xué)習(xí)筆記（六）
JavaScript 定義類或?qū)ο?javascript步入高手行列必須要了解的。
2009-12-12
JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了javascript基于字符串長(zhǎng)度判定、數(shù)據(jù)類型判定及正則判斷等操作進(jìn)行表單驗(yàn)證的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識(shí)，通過(guò)本文還簡(jiǎn)單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07