JS實現文字上下滾動

時間 2020-11-01

標籤 javascript css java 函數對象 seo 文檔 get 欄目 JavaScript 简体版

原文原文鏈接

<style type="text/css">
.box {
width: 150px;
height: 25px;
line-height: 25px;
border: #bbb 1px solid;
overflow: hidden;
}javascript

.box ul {
margin: 0;
padding: 0;
}css

.box li {
height: 25px;
line-height: 25px;
font-size: 12px;
text-align: center;
list-style-type: none;
}java

</style>函數

<script type="text/javascript">
function startmarquee(lh,speed,delay,index){
/*
函數startmarquee的參數：
lh：文字一次向上滾動的距離或高度；
speed：滾動速度；
delay：滾動停頓的時間間隔；
index：能夠使封裝後的函數應用於頁面當中不一樣的元素；
*/
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
//獲取文檔中的滾動區域對象，賦值給變量o；
o.innerHTML+=o.innerHTML; //對象中的實際內容被複制了一份，包含了兩個ul，固然li標籤也
//由原來的3行，變爲6行；複製的目的在於給文字不間斷向上滾動提供過渡。
o.onmouseover=function(){p=true}
//鼠標滑過，中止滾動；
o.onmouseout=function(){p=false}
//鼠標離開，開始滾動；p是true仍是false直接影響到下面start()函數的執行；
o.scrollTop = 0;
//文字內容頂端與滾動區域頂端的距離，初始值爲0；
function start(){
t=setInterval(scrolling,speed); //每隔一段時間，setInterval便會執行一次
//scrolling函數；speed越大，滾動時間間隔越大，滾動速度越慢；
if(!p){ o.scrollTop += 1;}
//滾動中止或開始，取決於p傳來的布爾值；
}
function scrolling(){
if(o.scrollTop%lh!=0){
//若是不被整除，即一次上移的高度達不到lh，則內容會繼續往上滾動；
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
//對象o中的內容以前被複制了一次，因此它的滾動高度，實際上是原來內容的兩倍高度；
//當內容向上滾動到scrollHeight/2的高度時，所有3行文字已經顯示了一遍，至此整塊內容
//scrollTop歸0；再等待下一輪的滾動，從而達到文字不間斷向上滾動的效果；
}else{
clearInterval(t);
//不然清除t，暫停滾動
setTimeout(start,delay);
//通過delay間隔後，啓動start() 再連續滾動
}
}
setTimeout(start,delay);
//第一次啓動滾動；setTimeout會在必定的時間後執行函數start()，且只執行一次
}
//傳遞參數
startmarquee(25,30,3000,0);
//帶停頓效果
startmarquee(25,40,0,1);
</script>對象

<body>
<div class="box" id="marqueebox0">
<ul>
<li style="background:#f8e2ac;">汝若</li>
<li style="background:#f5f5f5;">安好</li>
<li style="background:#ffe6ec;">即是晴天</li>
</ul>
</div>
<div class="box" id="marqueebox1">
<ul>
<li style="background:#f8e2ac;">晨鐘</li>
<li style="background:#f5f5f5;">暮鼓</li>
<li style="background:#ffe6ec;">安之若素</li>
</ul>
</div> seo

<script type="text/javascript">ip