汉字拼音滚动

最新推荐文章于 2024-10-10 10:50:43 发布

swordgod

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量1.6k

点赞数 1

文章标签： div javascript ruby filter border function

本文链接：https://blog.csdn.net/swordgod/article/details/1514035

版权

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>