JS魔法堂:通過marquee標簽實現信息滾動效果


一、前言                                   

  有限的空間展現無限的內容,這是滾動最常用到的地方。根據信息滾動效果我們可以有很多的實現方式,但HTML自帶的 marquee標簽 是其中一個較簡單的實現方式。下面記錄一下,供日后查閱。

 

二、 marquee標簽 的基礎知識                          

示例:

<marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay="42">
滾動的信息 </marquee>

屬性

   behavior ,滾動的方式。 值alternate 表示在兩端之間來回滾動; 值scroll 表示由一端重復滾動到另一端,為默認值; 值slide 表示由一端不重復地滾動到另一端。 

   direction , 滾動的方向。取值范圍為 left(默認值) , right , up 和 down 。

   loop ,滾動的次數。默認值-1表示一直滾動。

   scrollAmount , 設置一次滾動的步長。默認值為6, 當設置為負數時將采用默認值進行滾動。

   scrollDelay ,設置兩次滾動間的延遲時間(單位:ms)。默認值為85,當設置為負數時將采用默認值進行滾動。

 

三、鼠標懸浮暫停滾動、移除即恢復滾動                    

<marquee onmouseover="this.stop();" onmouseout="this.start();">
滾動的消息
</marquee>

 

四、總結                                  

  當我們只需實現當條特別公告等簡單信息滾動效果時,marquee標簽是一個很不錯的選擇(雖然HTML5中已經將其廢除並建議使用CSS3動畫效果代替)

  尊重原創,轉載請注明來自:http://www.cnblogs.com/fsjohnhuang/p/4009914.html  ^_^肥仔John


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM