单行文字不断向上滚动特效
解决方案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" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="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 <!--这里的html代码可以任意格式化--> 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>
