HTML对汉字拼音的支持使用ruby 和 rt 标签可以实现注音效果，以上代码效果如下图：
< style > ruby{}{font-size:14px;} rt{}{font-size:11px;} </ style > < ruby > 中国人民万万岁 < rt > zhong guo ren min wan wan sui </ rt >< br > 博客园 < rt > bo ke yuan </ rt > </ ruby >DOM解释: offsetTop 获取一个元素在页面中y座标或者是与页面的距离 offsetleft 获取一个元素在页面中x座标或者是与页面的距离 offsetHeight 对象（例子中DIV）高度 scrollTop 指页面滚动到当前的垂直位置 scrollHeight 对象可滚动的高度 clientHeight 文档可视区域中的高度 <div id=demo style=overflow:hidden;height:100;width:20; background:#214984;color:#ffffff> <div id=demo1> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> <img src="images/smilies/icon_mrgreen.gif"> </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 function Marquee(){ //当滚动至demo1与demo2交界时 if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 demo.οnmοuseοver=function() {clearInterval(MyMar)} //鼠标移开时重设定时器 demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)} </script> 这是带控制按钮的 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Menu </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="zh-cn"> <style type="text/css" title=""> body{font:10pt;} #menu{ width:180px; height:80px; overflow:hidden; } #menu div{ border-left:1px solid silver; margin:2px; text-align:center; cursor: default; } #scrollleft,#scrollright{ position: absolute; top:3px; width:18px; background-color:white; left:0; filter: alpha(opacity=0,finishopacity=100,style=1,startx=100,finishx=100,starty=0,finishy=100); } #scrollleft{right:0;filter: alpha(opacity=100,finishopacity=0,style=1,startx=100,finishx=100,starty=0,finishy=100);} </style> </head> <body> <div style="width:0px;height:0px;border:1px solid black;padding:3px;writing-mode:tb-rl;position: relative;"> <div id="menu" onMouseWheel="step=event.wheelDelta;overit=1;Marquee(Math.abs(step)/step);overit=0" onMouseOver="this.focus();" οnmοuseοut="overit=0;"> <div>关关雎鸠</div> <div>在河之洲</div> <div>窈窕淑女</div> <div>君子好逑</div> <div>参差荇菜</div> <div>左右流之</div> <div>窈窕淑女</div> <div>寤寐求之</div> <div>-----</div> </div> <div id="scrollright" οnmοuseοver="overit=1;Marquee(-1)" οnmοuseοut="overit=0;"></div> <div id="scrollleft" οnmοuseοver="overit=1;Marquee(1)" οnmοuseοut="overit=0;"></div> </div> <script language="javascript" type="text/javascript"> scrollleft.style.height=menu.offsetHeight; scrollright.style.height=menu.offsetHeight; var str=menu.innerHTML; var d_scrollWidth=menu.scrollWidth; var d_childWidth=menu.firstChild.offsetWidth+1; var count=0; var flag=1; var overit=0; var MyMar; while(menu.offsetWidth>menu.scrollWidth)menu.innerHTML+=str; menu.innerHTML+=str; function Marquee(dir){if(flag&&overit){flag=0;count=0;MyMar=setInterval('Marquee2('+dir+')',10);}} function Marquee2(dir){ if(flag)return; if(d_scrollWidth<=(menu.scrollWidth-menu.offsetWidth-menu.scrollLeft)&&dir==-1){menu.scrollLeft=menu.scrollWidth-menu.offsetWidth-2;} if(menu.scrollWidth-menu.offsetWidth-menu.scrollLeft<1&&dir==1)menu.scrollLeft=menu.scrollWidth-menu.offsetWidth-d_scrollWidth+2; menu.scrollLeft+=dir; if(d_childWidth-count)count++; else{ clearInterval(MyMar); flag=1; Marquee(dir); } } </script> </body> </html> 这个是左右滚动 <div style="width:200px;overflow:hidden"> <div style="position:relative;top:0px;left:0px;white-space:nowrap" id=news> <span id=nbo>新闻内容1 新闻内容2 新闻内容3 新闻内容4 新闻内容5 新闻内容6 </span> <script language=javascript> //重复一次新闻内容 document.write(nbo.innerHTML); </script> </div> </div> <script language=javascript> //实现不间断滚动 function newsScroll() { news.style.pixelLeft=(news.style.pixelLeft-1)%nbo.offsetWidth; } timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。 </script> 另一个公告滚动效果： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style type="text/css"> <!-- body { background-color: #000033; } --> </style></head> <body> <table width="728" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="989"><div id=icefable1> <table width="728" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="728" height="60" bgcolor="#0099CC">1</td> </tr> <tr> <td height="60" bgcolor="#00FFCC">2</td> </tr> <tr> <td height="60" bgcolor="#99FF00">3</td> </tr> <tr> <td height="60" bgcolor="#00CCFF">4</td> </tr> <tr> <td height="60" bgcolor="#FF9900">5</td> </tr> <tr> <td height="60" bgcolor="#FFFF33">6</td> </tr> </table> <script> marqueesHeight=60; stopscroll=false; with(icefable1){ style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; οnmοuseοver=new Function("stopscroll=true"); οnmοuseοut=new Function("stopscroll=false"); } preTop=0; currentTop=marqueesHeight; stoptime=0; icefable1.innerHTML+=icefable1.innerHTML; function init_srolltext(){ icefable1.scrollTop=0; setInterval("scrollUp()",1); }init_srolltext(); function scrollUp(){ if(stopscroll==true) return; currentTop+=1; if(currentTop==marqueesHeight+1) { stoptime+=1; currentTop-=1; if(stoptime==300) { currentTop=0; stoptime=0; } } else { preTop=icefable1.scrollTop; icefable1.scrollTop+=1; if(preTop==icefable1.scrollTop){ icefable1.scrollTop=marqueesHeight; icefable1.scrollTop+=1; } } } init_srolltext(); </script> </div> </td> </tr> <tr> <td height="145" bgcolor="#0066FF"> </td> </tr> </table> </body> </html>
