如何讓一條小丑魚會騎自行車


轉載地址:http://www.webhek.com/html-marquee


最近看到一個有趣的網頁,頁面很簡單,一條魚騎着自行車,從右邊出來,從左邊消失,來回的滾動。看了一下源代碼,非常的簡單,使用了一個不常見的HTML標記:marquee

HTML代碼

<marquee behavior="scroll" direction="left" scrollamount="30" truespeed="yes">
<img src="FishBike.png" />
</marquee>

效果


是不是很有趣!

這種效果,以前在網頁是很是流行。不過最近幾乎見不到了,原因是它干擾網頁讀者。對於這種來回滾動的文字和圖片,似乎只有電視台在新聞節目的下邊滾動新聞的形式。我查看了一下資料,發現marquee標記是一種不推薦使用的標記。雖然現在的大多數瀏覽器都支持,但保不齊將來會怎樣。

我還發現了另外一個它的有趣特征,marquee標記還能表現出物體反彈的效果。下面就是一個演示例子。

HTML代碼

<marquee>這段文字將會從右向左滾動</marquee>

<marquee direction="up">這段文字將會從下向上滾動</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
<marquee behavior="alternate">
這段文字將會進行彈跳運動
</marquee>
</marquee>

實例演示

這段文字將會從右向左滾動 這段文字將會從下向上滾動 這段文字將會進行彈跳式運動

下面我們來看看marquee的具體用法。

marquee標記的各種屬性:

behavior
屬性值可以是 scrollslide 或者  alternate。也就是運動方式分為滾動,滑動或斜着運動。缺省值是 scroll
bgcolor
背景色
direction
運動方向,值可以為  leftrightup 和  down。缺省為  left
height
高度。
hspace
豎向邊距。
loop
設置滾動循環次數。如果不指明,缺省值是-1,也就是無限滾動。
scrollamount
滾動時,每移動一次的位移距離,用像素值表示,缺省是6。
scrolldelay
每位移一次之間間隔的時間,用毫秒表示。缺省值是85。需要注意的是,這個值如果設定為效應60,你還需要使用  truespeed 屬性來共同作用,否則低於60為無效值。
truespeed
當有這個屬性時,  scrolldelay 值可以低於 60 。
vspace
橫向邊距
width
寬度。

這還有一個用來例子大集合,非常豐富,大家可以看一下:

似乎一些政府網站上還有這種滾動播放的形式,但大多是用js制作出來的,很顯然,比使用marquee要復雜些,但js制作出來的滾動文字有很多控制功能,比如鼠標放到文字上時,文字會停止滾動,這樣更容易讓讀者看清滾動文字的內容。我想在marquee標記的基礎上是否也能實現這種效果呢?



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com