當前位置：
首頁 >
单行文字不断向上滚动特效
發布時間：2025/3/20
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
单行文字不断向上滚动特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
解決方案1
1 <script> 2 var marqueeContent=new Array(); 3 //滾動新聞 4 marqueeContent[1]='世界名牌理事會會員單位<br>'; 5 marqueeContent[2]='2008中國十大美容美體連鎖機構<br>'; 6 marqueeContent[3]='2008中國十佳明星美容院<br>'; 7 marqueeContent[4]='商務部特許經營備案企業<br>'; 8 marqueeContent[0]='web3.0時代<br>'; 9 var marqueeInterval=new Array(); //定義一些常用而且要經常用到的變量 10 var marqueeId=0; 11 var marqueeDelay=2000; 12 var marqueeHeight=20; 13 function initMarquee() { 14 var str=marqueeContent[0]; 15 document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 16 marqueeId++; 17 marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 18 } 19 function startMarquee() { 20 var str=marqueeContent[marqueeId]; 21 marqueeId++; 22 if(marqueeId>=marqueeContent.length) marqueeId=0; 23 if(marqueeBox.childNodes.length==1) { 24 var nextLine=document.createElement('DIV'); 25 nextLine.innerHTML=str; 26 marqueeBox.appendChild(nextLine); 27 } 28 else { 29 marqueeBox.childNodes[0].innerHTML=str; 30 marqueeBox.appendChild(marqueeBox.childNodes[0]); 31 marqueeBox.scrollTop=0; 32 } 33 clearInterval(marqueeInterval[1]); 34 marqueeInterval[1]=setInterval("scrollMarquee()",20); 35 } 36 function scrollMarquee() { 37 marqueeBox.scrollTop++; 38 if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){ 39 clearInterval(marqueeInterval[1]); 40 } 41 } 42 initMarquee(); 43 </script>解決方案2
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <style> 10 div{width:200px;height:20px;overflow:hidden;} 11 </style> 12 </head> 13 <body> 14 <div id="container"><div>第一個標題</div><div>第二個標題</div><div>第三個標題</div></div> //這里的div之間不能留有空格或者換行 15 <script language="JavaScript"> 16 17 function roll() 18 { 19 var container=document.getElementById('container'); 20 var child = container.firstChild; 21 22 if(child.style.marginTop=='') 23 { 24 child.style.marginTop='0px'; 25 } 26 27 if(parseInt(child.style.marginTop)==-child.offsetHeight) 28 { 29 child.style.marginTop = "0px"; 30 container.appendChild(child); 31 setTimeout("roll()",roll.stoptime) 32 } 33 else 34 { 35 if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight) 36 { 37 child.style.marginTop = - child.offsetHeight + "px"; 38 } 39 else 40 { 41 child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px"; 42 setTimeout("roll()",roll.timeout) 43 } 44 45 } 46 } 47 48 roll.timeout = 20; //時長 49 roll.step = 1; //步伐 50 roll.stoptime = 2000; //停留時間 51 roll(); 52 53 </script> 54 </body> 55 </html>論壇地址：http://bbs.blueidea.com/thread-2848725-1-1.html
在實際測試中發現，上面代碼不兼容火狐和谷歌瀏覽器（其他瀏覽器尚未測試），其原因是以為瀏覽器對dom元素的解析不同。
IE會忽略節點之間生成的空白文本節點（比如換行字符），而火狐則不會，所以取到的firstChild會存在差異。
做兼容性處理后的代碼：
?
?
轉載于:https://www.cnblogs.com/yiliweichinasoft/p/3678185.html
總結
以上是生活随笔為你收集整理的单行文字不断向上滚动特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 日常时间安排
- 下一篇： Transform.Rotate 旋转