DOM跑馬燈文字效果

2024-09-05 12:21:36

字體：大中小

來源：轉載

供稿：網友

DOM對象實現的標題欄跑馬燈文字滾動效果，這里是取自title標簽內的文字來實現跑馬燈效果，只是為了演示Dom對象的用法。在示例中，可控制文字向左滾動、向右滾動，為了便于理解，代碼中已給出完整的注釋，相信是研究DOM操作的一個好例子。

<html><head><title>Dom跑馬燈效果</title><script type="text/javascript" language="javascript">var timeId = "";//默認跑馬燈效果function run() {  var title = document.title;  var firsttitle = title.charAt(0);  var remaintitle = title.substring(1, title.length);  document.title = remaintitle + firsttitle;}//左轉，字符串拼接function leftrun() {  var title = document.title;  var firsttitle = title.charAt(0);  var remaintitle = title.substring(1, title.length);  document.title = remaintitle + firsttitle;}//右轉，字符串拼接function rightrun() {  var title = document.title;  var righttitle = title.substring(title.length - 1, title.length);  var remaintitle = title.substring(0, title.length - 1);  document.title = righttitle + remaintitle;}//定義變量記錄開啟的計時器var leftclearId;var rightclearId;//左滾方法function leftsetInter() {  //定義變量記錄當前開啟的計時器ID  leftclearId = setInterval('leftrun()', 500);  //清除正在運行的計時器  clearInterval(rightclearId);}//右滾方法function rightsetInter() {  //定義變量記錄當前開啟的計時器ID  rightclearId = setInterval('rightrun()', 500);  //清除正在運行的計時器  clearInterval(leftclearId);}</script></head><body>    <input type="button" value="跑馬燈效果" onclick="timeId=setInterval('run()',500)"/>    <input type="button" value="停止" onclick="clearInterval(timeId)"/><br/><br/><br/>    <input type="button" value="向左滾動" onclick="leftsetInter()"/>    <input type="button" value="向右滾動" onclick="rightsetInter()"/></body></html>

上一篇：CSS3實例：文字描邊效果

下一篇：3D文字旋轉有空間立體感