文字滾動效果

1、文字滾動效果,用MARQUEE實現
<marquee direction=方向 loop=循環次數 behavior=滾動形式 dataformatas=文字類型 width=字符滾動窗口的寬度 height=字符滾動窗口的高度 scrolldelay=每次循環的間隔時間 scrollamount=每次移動的長度 bgcolor=滾動窗口的背景顏色 >
…………要滾動的文字…………
</marquee>
direction:這個標記是說明所要滾動的文字是向哪個方向滾動的,它的參數有:left,right,up,down
           left:文字自右向左滾動
           right:文字自左向右滾動
           up:文字自下向上滾動
           down:文字自上向下滾動
<marquee></marquee>這個標記是IE特有的,NETSCAPE是瀏覽不到這效果的
loop:如果想讓文字無限循環,則參數是"-1";如果不是可以自行設置循環次數
behavior:滾動形式,有scroll,alternate,slide等。
          scroll:是以滾動的形式移動
          alternate:是以來回的形式移動
          slide:文字滾動出來後不再動
dataformatas:文字類型,參數爲:html,text,css等等
width:你可以自行設置滾動窗口的寬度,大小是以像素爲單位的,如100,150等,也可以用百分數表示,如50%
height:跟width一樣是控制窗口的高度,大小也是以像素爲單位的
scrolldelay:即是兩次循環間的時間間隔,當一次循環結束後,第二次循環會在所設置的時間後出現,單位爲毫秒。1秒=1000毫秒
scrollamount:每次移動的長度,以像素爲單位
bgcolor:背景顏色,可以是16進制數,也可以是顏色名(請參看顏色表)
 
2、用JAVASCRIPT實現,功能強大,實現從下向上無間斷滾動
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.3020" name=GENERATOR>
</HEAD>
<BODY>
<DIV    
id=marqueey>連續滾動的字測試1<BR>連續滾動的字測試2<BR>連續滾動的字測試3<BR>連續滾動的字測試4<BR></DIV>
<SCRIPT language=JavaScript>
marqueeyHeight=140;        //載體高度控制
stopscroll=false;
with(marqueey){
        style.width=0;
        style.height=marqueeyHeight;
        style.overflowX="visible";
        style.overflowY="hidden";
        noWrap=true;
         Function("stopscroll=true");
         Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
        templayer.innerHTML="";
        while(templayer.offsetHeight<marqueeyHeight){
                templayer.innerHTML+=marqueey.innerHTML;
        }
        marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;
        setInterval("scrollUp()",40);        //滾動速度控制,越大越慢
}
document.body.
function scrollUp(){
        if(stopscroll==true) return;
        preTop=marqueey.scrollTop;
        marqueey.scrollTop+=1;
        if(preTop==marqueey.scrollTop){
                marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;
                marqueey.scrollTop+=1;
        }
}
</SCRIPT>
</BODY></HTML>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章