网页滚动效果实现-优快云博客

水平滚动

<!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"></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"></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"></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>

JS滚动代码