wordpress CMS主题 微信
Home > 网站建设 > 網頁文字怎樣實現滾動的效果?

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

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

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

发表评论