会飞的鱼

關 於 藝 術 丨 源 於 生 活
關 於 理 想 丨 始 於 我 們
首页 » 电脑网络 » 跑馬燈HTML特效

跑馬燈HTML特效

跑馬燈基礎語法│ 增加屬性圖片也可以跟著跑滑鼠移入就會停止│ 

一般的跑馬燈
滑鼠移入就會停止的跑馬燈
左右來回彈的跑馬燈
帶著圖形 與 超連結 一起跑的跑馬燈
哇!好多不一樣的跑馬燈喔~ ^.^ 
跑馬燈可以有很多變化,只要你了解一些關於跑馬燈的HTML語言...

跑馬燈的基楚HTML: 
編輯網頁,打開原始碼
<html>
<head>
...<title>標題</title>
</head> 

<body> 

...... 貼在這兒 
</body>
</html>
<marquee>要跑的文字或物件</marquee>
HTML標籤語言通常是配對的,
跑馬燈是以 <marquee>開始,</marquee>結尾,
在標籤語言中間所包含的就是要〝跑〞的東西。
註 :HTML中『 < 』 與 『 > 』符號,是鍵盤上的〝大於〞、〝 小於〞 那個符號, 不是注音符號中的 括弧 喔!
 

屬性
跑馬燈不只只能向左跑,還可以改變 方向、速度... 還有設定範圍的的寬高,只要在標籤中加上「屬性」就可控制。
加在那兒?
  <marquee 加在這> 要跑的文字 </marquee>
  註:加屬性前記得按一格「空白鍵」, 〝空格〞 是「屬性」與「屬性」間的分段,你可以任意組合使用。
屬 性 一 覽 表
屬 性
其 他 說 明
範 例
範 例 的 完 整 語 法
對齊 align="top" 齊上 top 
居中 midden 
齊下 botton
 
方向 direction="up" 左 left 
右 right 
上 up
下 dun
慢慢向上跑 <marquee direction="up" height="50" scrollamount="1">
要跑的文字</marquee>
行為behavior="altemate" 左右來回 alternate
進入後停止slide
反覆 scroll 
左右來回彈
<marquee behavior="alternate">
要跑的文字</marquee>
進入後停止 <marquee behavior="slide">
要跑的文字</marquee>
(備註:一般反覆scroll的指令不用寫,因為那是預設)
 height="高的數字" (跑馬燈區域的高度)

寬 width="寬的數字"

(跑馬燈區域的寬度)
速度scrollamount="1" 中間的數字是
「滑動步伐的寬」
步伐寬1 步伐寬5 <marquee scrollamount="1"要跑的文字</marquee>
<marquee scrollamount="5"要跑的文字</marquee>
背景色
bgcolor="
#0022FF"
"#0022FF"是HTML色碼,兩個 兩個為一組,由00~99,AA~FF所組成,代表紅R、綠G、藍B,
數字越小越深,數字越大越亮。
例: #FF0000, #00FF00, #0000FF,黃 #FFFF00, #9966CC,....。

圖片也可以跟著跑
在跑馬燈<marquee> 標籤開始 至</marquee>結尾,中間所包含的物件 都會跟著跑,包含文字、圖形、超連結...
範例:  與 超連結 都可以夾帶一起跑  
寫法:
<marquee>
<img src="圖形的http位置" width="圖寬" height="圖高"> 
<a href="超連結的網址target="_blank">
要超連結的文字</a>
</marquee>
【說明】
註1. 顯示圖形的HTML是:<img src="圖形的http位置">

   例:我要顯示這張小圖→

    假設我已把這張叫做「INDEX_LOGOME2.GIF」的圖上傳 放到我的http://www.liu-may.com網站空間的「img」裡,
    所以圖的絕對路徑位置是「http://www.liu-may.com/img/INDEX_LOGOME2.GIF」
    那麼要顯示這張圖的HTML寫法就是↓
    <img src="http://www.liu-may.comimg/INDEX_LOGOME2.GIF ">
註2. 超連結的HTML是:<a href="連結的http位置">名稱</a>
  target="_blank" 表示超連結開啟方式是「開在新視窗 」
    例:我想要超連結到「奇摩」,並且開在新視窗,而奇摩的網址是「http://tw.yahoo.com」
      那麼這段超連結的HTML寫法是:
      <a href="http://tw.yahoo.com" target="_blank"> 奇摩 </a>

滑鼠移入就會停止的跑馬燈
範例:
滑鼠移入就會停止的跑馬燈
寫法:
<marquee onMouseOver="this.stop()" onMouseOut="this.start()"height="50" direction="up" scrolldelay="4" scrollamount="1">要跑的文字</marquee>
【說明】
onMouseOver="this.stop()" 表示滑鼠移入〝範圍區〞既「停止」
onMouseOut="this.start()" 表示滑鼠離開便「跑動」
在stop與start後面的『 ( 』與『 ) 』,是鍵盤上數字健9與0上方的那個括弧符號,不是數字〝零〞喲 ^.^
PS:以上跑馬燈 整段HTML要改的只有〝要跑的文字〞 ^_^

文章如无特别注明均为原创! 作者: 璀璨, 转载或复制请以 超链接形式 并注明出处 璀璨's Blog
原文地址《 跑馬燈HTML特效》发布于2014-4-18

分享到:
打赏

评论

游客

看不清楚?点图切换
  1. #2
    qq_avatar

    666

    璀璨 4年前 (2016-09-24)回复
  2. #1
    qq_avatar

    刀锋万能营销软件是一款模拟人工发布的软件,他可以模拟人工自动输入,自动点击,以替代人工的繁琐操作,解放你的双手。免费论坛群发,免费博客群发,免费B2B群发,免费分类信息群发。

    叶材柱卧 6年前 (2014-09-10)回复
切换注册

登录

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册

sitemap