通過JS如何實現文字間歇循環滾動效果

來源：懂視網責編：小采時間：2020-11-27 19:40:45

通過JS如何實現文字間歇循環滾動效果

通過JS如何實現文字間歇循環滾動效果:這篇文章主要介紹了JS實現的文字間歇循環滾動效果,涉及javascript結合時間函數定時觸發實現頁面元素動態操作相關技巧,需要的朋友可以參考下本文實例講述了JS實現的文字間歇循環滾動效果。分享給大家供大家參考，具體如下：具體代碼如下：<!DOCTYP

推薦度：

點擊下載本文 文檔為doc格式

導讀通過JS如何實現文字間歇循環滾動效果:這篇文章主要介紹了JS實現的文字間歇循環滾動效果,涉及javascript結合時間函數定時觸發實現頁面元素動態操作相關技巧,需要的朋友可以參考下本文實例講述了JS實現的文字間歇循環滾動效果。分享給大家供大家參考，具體如下：具體代碼如下：<!DOCTYP

這篇文章主要介紹了JS實現的文字間歇循環滾動效果,涉及javascript結合時間函數定時觸發實現頁面元素動態操作相關技巧,需要的朋友可以參考下

本文實例講述了JS實現的文字間歇循環滾動效果。分享給大家供大家參考，具體如下：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>www.gxlcms.com - 間歇循環滾動</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>
<p 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>
</p>
<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>

上面是我整理給大家的，希望今后會對大家有幫助。

詳解react關于事件綁定this的四種方式

利用vuex實現登錄狀態的存儲與未登錄狀態不允許瀏覽，具體有哪些方法？

解決低版本的瀏覽器不支持es6的import問題

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com