水平滚动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>水平滚动,首尾相连(滚动区域小于两个内容宽度之和)</title> </head> <body style="text-align:center;" mce_style="text-align:center;"> <div id="marq" style="overflow:hidden;border:1px solid;" mce_style="overflow:hidden;border:1px solid;"> <table> <tr> <td id="div1"> <table id="tab" height="20px"> <tr><td width="1000px">尊重他人劳动成果,转载请自觉注明出处!</td></tr> </table> </td> <td id="div2"></td> </tr> </table> </div> <mce:script type="text/javascript"><!-- function $(eid){ return document.getElementById(eid); } function changeW(marq,tab,div2,wid){ $(marq).style.width = wid; $(tab).style.width = wid; $(div2).style.width = wid; } div2.innerHTML = div1.innerHTML; function marqLeft(){ if(marq.scrollLeft>=div1.scrollWidth){ marq.scrollLeft=0 }else{ marq.scrollLeft++ } } var speed = 30 ; //滚动速度 var wid = 240 ; //指定滚动层宽度 window.onload = function(){ changeW("marq","tab","div2",wid); var myq=setInterval(marqLeft,speed) marq.οnmοuseοver=function() {clearInterval(myq)} marq.οnmοuseοut=function(){ myq=setInterval(marqLeft,speed) } } // --></mce:script> </body> </html> 垂直滚动 <html> <head><title>垂直滚动,首尾相连(滚动区域小于两个内容宽度之和)</title> </head> <body style="text-align:center;" mce_style="text-align:center;"> <div id="marq" style="overflow:hidden;border:1px solid;width:260px;"> <div id="div1"> 1、尊重他人劳动成果,转载请自觉注明出处!<br/> 2、尊重他人劳动成果,转载请自觉注明出处!<br/> 3、尊重他人劳动成果,转载请自觉注明出处!<br/> 4、尊重他人劳动成果,转载请自觉注明出处!<br/> </div> <div id="div2"></div> </div> <mce:script type="text/javascript"><!-- function $(eid){ return document.getElementById(eid); } function changeH(marq,div1,div2,h){ $(marq).style.height = h; $(div1).style.height = h; $(div2).style.height = h; } div2.innerHTML = div1.innerHTML; function marqTop(){ if(marq.scrollTop>=div1.scrollHeight){ marq.scrollTop=0 ; }else{ marq.scrollTop++ ; } } var speed = 30 ; //滚动速度 var h = 58 ; //指定滚动层高度 window.onload = function(){ changeH("marq","div1","div2",h); var myq=setInterval(marqTop,speed) marq.οnmοuseοver=function() {clearInterval(myq)} marq.οnmοuseοut=function() { myq=setInterval(marqTop,speed) } } // --></mce:script> </body> </html> 新闻轮翻效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <mce:style type="text/css"><!-- .mar{ border:#a2c66d 1px dotted; padding:3px; } a{ text-decoration:none; } --></mce:style><style type="text/css" mce_bogus="1"> .mar{ border:#a2c66d 1px dotted; padding:3px; } a{ text-decoration:none; } </style> </HEAD> <BODY> <DIV class="mar"> <SCRIPT> var marqueeContent = new Array(); marqueeContent[0]='<li>建议使用浏览器IE6.0 或Firefox1.5,分辨率1024*768浏览本站。'; marqueeContent[1]='<li>新闻轮流轮翻滚动效果!'; var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 var marqueeId=0; //滚动到第几条 var speed=3000; //速度 var lineHeight=18; //设置行高 //接下来的是定义一些要使用到的函数 function initMarquee() { var str=marqueeContent[0]; document.write('<div id="box" style="text-align:left;overflow:hidden;height:'+lineHeight+'px" ><div>'+str+'</div></div>'); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",speed); } function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(box.childNodes.length==1) { var nextLine=document.createElement('div'); nextLine.innerHTML=str; box.appendChild(nextLine); } else { box.childNodes[0].innerHTML=str; box.appendChild(box.childNodes[0]); box.scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee() { box.scrollTop++; if(box.scrollTop%lineHeight==(lineHeight-1)){ clearInterval(marqueeInterval[1]); } } initMarquee(); </SCRIPT> </DIV> </BODY> </HTML>