當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

单行文字不断向上滚动特效

發布時間：2025/3/20 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了单行文字不断向上滚动特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

解決方案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會存在差異。
做兼容性處理后的代碼：

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  15 <div id="container"> 16 <div>第一個標題</div> 17 <div>第二個標題</div> 18 <div>第三個標題</div> 19 </div> 20 </body> 21 22 <script language="JavaScript"> 23 //獲取第一個子元素 24 function get_firstchild(obj) 25 { 26 var child=obj.firstChild; 27 while (child.nodeType!=1) 28 { 29 child=child.nextSibling; 30 } 31 return child; 32 } 33 34 function roll() 35 { 36 var container=document.getElementById('container'); 37 var child = get_firstchild(container); 38 39 if(child.style.marginTop=='') 40 { 41 child.style.marginTop='0px'; 42 } 43 44 if(parseInt(child.style.marginTop)==-child.offsetHeight) 45 { 46 child.style.marginTop = "0px"; 47 container.appendChild(child); 48 setTimeout("roll()",roll.stoptime) 49 } 50 else 51 { 52 if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight) 53 { 54 child.style.marginTop = - child.offsetHeight + "px"; 55 } 56 else 57 { 58 child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px"; 59 setTimeout("roll()",roll.timeout) 60 } 61 62 } 63 } 64 65 roll.timeout = 20; //時長 66 roll.step = 1; //步伐 67 roll.stoptime = 2000; //停留時間 68 69 //執行 70 roll(); 71 </script> 72 </html>

轉載于:https://www.cnblogs.com/yiliweichinasoft/p/3678185.html

總結

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

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

上一篇：日常时间安排
下一篇： Transform.Rotate 旋转