• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > 怎样实现网页文字滚动的效果?

    怎样实现网页文字滚动的效果?

    作者: 分类:网站建设 点击: 5,390 次
    wordpress CMS主题:ssmay主题

      怎样实现网页文字滚动的效果?有时想将网页上的某些文字特殊化:上下滚动、左右滚动。怎么办呢?这个不难,下面介绍2种方法给大家。

      方法一:使用marpuee来实现

      在需要滚动的文字前面加上下面的代码:

      <MARQUEE scrollAmount=1 scrollDelay=77 direction=up width=270 height=77
      onmouseout="this.start()" onmouseover="this.stop()">

      再在需要滚动的文字后面加上</MARQUEE>

      代码说明:
      1、width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
      2、direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

      3、scrollDelay=77代表停顿时间,数字越大停留时间越长;

      4、scrollAmount=1代表滚动速度,数字越大越快。

      方法二:js文字上下滚动代码

      代码样式如下:

      <div id="mq" style="width:100%;height:200px;overflow:hidden" onmouseover="iScrollAmount=0"
      onmouseout="iScrollAmount=1">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaa;<br/>
      我轻轻的招手,作别西天的云彩。<br/>
      <br/>
      那河畔的金柳,是夕阳中的新娘;<br/>
      波光里的艳影,在我心头荡漾。<br/>
      <br/>
      软泥上的青荇,油油的在水底招摇;<br/>
      在康河的柔波里,我甘心作一条水草。<br/>
      <br/>
      那榆荫下的一潭,不是清泉是天上的虹;<br/>
      揉碎在浮藻间,沉淀彩虹似的梦。<br/>
      <br/>
      寻梦,撑支长篙,向青草更青处漫溯;<br/>
      满载一船星辉,在星辉斑烂里放歌。<br/>
      <br/>
      但我不能放歌,悄悄是别离的笙箫;<br/>
      夏虫也为我沉默,沉默是今晚的康桥。<br/>
      <br/>
      悄悄的我走了,正如我悄悄的来;<br/>
      我挥一挥衣袖,不带走一片云彩。<br/>
      <br/>
      </div>

      <script>
      var oMarquee = document.getElementById("mq"); //滚动对象
      var iLineHeight = 42; //单行高度,像素
      var iLineCount = 7; //实际行数
      var iScrollAmount = 1; //每次滚动高度,像素
      function run() {
      oMarquee.scrollTop += iScrollAmount;
      if ( oMarquee.scrollTop == iLineCount * iLineHeight )
      oMarquee.scrollTop = 0;
      if ( oMarquee.scrollTop % iLineHeight == 0 ) {
      window.setTimeout( "run()", 2000 );
      } else {
      window.setTimeout( "run()", 50 );
      }
      }
      oMarquee.innerHTML += oMarquee.innerHTML;
      window.setTimeout( "run()", 2000 );
      </script>

      可以参阅我的首页了解效果。

       



      QQ二维码

    文章作者:锐锋堂
    本文地址:http://wanlimm.com/7720130930520.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.