wordpress CMS主题 微信
Home > 网站建设 > 怎样实现网页文字滚动的效果?

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

高时银博客 网站建设 点击: 3,164 次 0 0
  • 标签:
  • 怎样实现网页文字滚动的效果?有时想将网页上的某些文字特殊化:上下滚动、左右滚动。怎么办呢?这个不难,下面介绍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>

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

     


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论