入門的東西感覺也快介紹完了，換句話說...是快要講完站長已經學的東西= =
看來要再加把勁看多一點...
這次啊~來說一下跑馬燈好了!!!(激動)
距離第二集，這第三集似乎隔的有點久
可是偏偏這一集不能說得太快，因為實在是內容可能會有點少= =
但是又不能因為這樣就廢話一大堆欺騙消費者，喔不，是閱讀的人才對
我在想，短短的一集學個跑馬燈用法應該也不錯吧XD
那就開始了喔
開始了喔!
跑馬燈
站長測試在
safari 5.1
firefox Aurora 8.0a2
Google Chrome 13.0
IE 9.0.2
跑馬燈功能都可以完整呈現
跑馬燈的最基本的html寫法是這樣的
<marquee>
跑馬燈內容
</marquee>
實做出來長這樣
如果要加個背景色
在<marquee>中加個指令 bgcolor="填入色碼"
像這樣 <marquee bdcolor="000000">
000000是黑色背景↓
可是!!!!!這樣內容不是就看不清楚了嗎!!!!(抗議!!!!)
先別緊張，請運用之前教的文字的顏色變換
改一下文字顏色就行
什麼?忘記了? 那我就直接寫出來好了(注意下面的紅色部分)
<marquee bgcolor="000000"><font color="FF4500">我是跑馬燈</font></marquee>
做出來是這樣，簡單吧!
上面的跑馬燈都是左邊進右邊出
這樣一點兒變化都沒有
再來要說的是跑馬燈的方向囉
也不用太認真，因為很淺顯易懂啊這邊
一樣，在<marquee>中加個 direction="" 的指令
可以是 up right left 跟 down
示範一下加了right的跑馬燈
記得字要改成由又寫向左= = (弄出來才發現= =)
還可以變更跑馬燈的高度、寬度
這次要加的指令是 height="" width=""
<marquee color="000000" height="100" width="100" direction="up"><font color="FF4500"><center>我是跑馬燈</center></font></marquee>
藍色部分是置中
變更高度對於往上跑或是往下跑的跑馬燈比較需要
寬度如果沒有定的話
跑馬燈會將寬度調到適合欄位的大小
還有一種，就是「滑鼠移入跑馬燈會停止」的功能
html碼比較複雜些，不過稍微看一下也不難懂
需要兩個指令
一個是 onmouseover="this.stop()" 這是控制滑鼠移入時要停止
另一個則是 onmouseout="this.start()" 控制滑鼠移出時繼續移動
完整程式碼如下
<marquee bgcolor="000000" onmouseover="this.stop()" onmouseout="this.start"><font color="FF4500">我是跑馬燈</font></marquee>
再來是跑馬燈的速度!!!!!
跑快一點啊馬兒!!!!(怎麼讓我想到了搞笑的還珠格格...= =)
輕鬆愜意的加個指令 scrollamount=""
簡單的說就是控制跑馬燈的步伐距離
<marquee bgcolor="000000" scrollamount="5"><font color="FF4500">我是跑馬燈</font></marquee>
跟上面比就慢了一些 (我不是說要快一點嗎?馬兒?)
另一個相關的指令 scrolldelay=""
這是控制跑馬燈每次出現的間隔時間
<marquee bgcolor="000000" scrolldelay="0.1"><font color="FF4500">我是跑馬燈</font></marquee>
快多了，馬兒。 (= =
大家一定知道學以致用!!!!
所以跑馬燈裡面也可以嵌入圖片yo!
示範程式碼如下
<marquee bgcolor="000000"><img src="http://puu.sh/4GVe" height=20><a href="http://jys.twbbs.org/" target="_blank">馬兒快跑</a></marquee>
紅色部分是圖片的網址
藍色部分是設定連結的網址，這邊我是連到楓林軒
<a href>也可以放到<img src>前面
這樣連圖跟字一樣都會有連結了
差不多就是這樣了~^^
~ Share & Enjoy it ~
沒有留言:
張貼留言