汉字拼音滚动

HTML对汉字拼音的支持使用ruby 和 rt 标签可以实现注音效果，以上代码效果如下图：

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>

这是带控制按钮的









<div >
<div id="menu" OnMouseWheel="step=event.wheelDelta;overit=1;Marquee(Math.abs(step)/step);overit=0" OnMouseOver="this.focus();" Onmouseout="overit=0;">
<div>关关雎鸠</div>
<div>在河之洲</div>
<div>窈窕淑女</div>
<div>君子好逑</div>
<div>参差荇菜</div>
<div>左右流之</div>
<div>窈窕淑女</div>
<div>寤寐求之</div>
<div>-----</div>
</div>
<div id="scrollright" Onmouseover="overit=1;Marquee(-1)" Onmouseout="overit=0;"></div>
<div id="scrollleft" Onmouseover="overit=1;Marquee(1)" Onmouseout="overit=0;"></div>
</div>

这个是左右滚动

<div >
<div  id=news>
<span id=nbo>新闻内容1 新闻内容2 新闻内容3 新闻内容4 新闻内容5 新闻内容6 </span>

</div>
</div>

另一个公告滚动效果：






<table   border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td ><div id=icefable1>
        <table   border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td   bgcolor="#0099CC">1</td>
          </tr>
          <tr>
            <td  bgcolor="#00FFCC">2</td>
          </tr>
          <tr>
            <td  bgcolor="#99FF00">3</td>
          </tr>
          <tr>
            <td  bgcolor="#00CCFF">4</td>
          </tr>
          <tr>
            <td  bgcolor="#FF9900">5</td>
          </tr>
          <tr>
            <td  bgcolor="#FFFF33">6</td>
          </tr>
        </table>
        
    </div>
  </td>
  </tr>
  <tr>
    <td  bgcolor="#0066FF"> </td>
  </tr>
</table>