文字向上滾動效果，從網上找到，放到博上，作為筆記，感謝原作者

?

代碼
<style?type="text/css"?>
????li{color:?#006699;font-size:12px;?margin-top:3px;?margin-left:0px}
????ul{?padding-left:0px;?padding-top:1px;?margin-left:20px}
</style>

<div?id="marquees"?style="width:210px;?margin-top:10px">?<!--?這些是字幕的內容，你可以任意定義?-->
<ul>
<li?title="文字1">文字1</li>
<li?title="文字1"?>文字2</li>
<li?title="文字3"?>文字3</li>
<li?title="文字4">文字4</li>
<li?title="文字5">文字5</li>
<li?title="文字6">文字6</li>?
<li?title="文字7">文字7</li>
<li?title="文字8"?>文字8</li>
<li?title="文字9">文字9</li>
</ul>

</div>?
<!--?以下是javascript代碼?-->
<script?language="javascript">
<!--
marqueesHeight=103;?//內容區高度
stopscroll=false;?//這個變量控制是否停止滾動
with(marquees){
noWrap=false;?//這句表內容區不自動換行
style.width=210;?//于是我們可以將它的寬度設為0，因為它會被撐大
style.height=marqueesHeight;
style.overflowY="hidden";?//滾動條不可見
onmouseover=new?Function("stopscroll=true");?//鼠標經過，停止滾動
onmouseout=new?Function("stopscroll=false");?//鼠標離開，開始滾動
}
//這時候，內容區的高度是無法讀取了。下面輸出一個不可見的層"templayer"，稍后將內容復制到里面：
document.write('<div?id="templayer"?style="position:absolute;z-index:1;visibility:hidden"></div>');
function?init(){?//初始化滾動內容
//多次復制原內容到"templayer"，直到"templayer"的高度大于內容區高度：
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}?//把"templayer"的內容的“兩倍”復制回原內容區：
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//設置連續超時，調用"scrollUp()"函數驅動滾動條：
setInterval("scrollUp()",100);
}
document.body.onload=init;
preTop=0;?//這個變量用于判斷滾動條是否已經到了盡頭
function?scrollUp(){?//滾動條的驅動函數
if(stopscroll==true)?return;?//如果變量"stopscroll"為真，則停止滾動?
preTop=marquees.scrollTop;?//記錄滾動前的滾動條位置
marquees.scrollTop+=1;?//滾動條向下移動一個像素
//如果滾動條不動了，則向上滾動到和當前畫面一樣的位置
//當然不僅如此，同樣還要向下滾動一個像素(+1)：
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

?

?

轉載于:https://www.cnblogs.com/Carmack/archive/2010/01/28/1658226.html

總結

以上是生活随笔為你收集整理的javascript滚动文字的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。