快捷導(dǎo)航

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.dbjr.com.cn - 間歇循環(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)文章

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