文章图片标题

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

分类:优化推广 作者:时美网编辑 评论:0 点击: 2,743 次

有时想将网页上的某些文字特殊化:上下滚动、左右滚动。怎么办呢?这个不难,下面介绍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://ssmay.com/7720121210176.html

怎样实现网页文字滚动的效果?:等您坐沙发呢!

发表评论


远视天下
时美网