• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > 網頁文字怎樣實現滾動的效果?

    網頁文字怎樣實現滾動的效果?

    作者: 分类:网站建设 点击: 2,118 次
    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/77201404041834.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    或许你会感兴趣的文章:

    发表评论

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

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