顧名思義,本節(jié)就是向大家介紹怎樣去移動(dòng)文字和移動(dòng)圖片的。一、移動(dòng)文字篇
嗯,首先,大家不要讓眼前亂動(dòng)的文字搞得眼花繚亂,別以為它是很復(fù)雜的東東,其實(shí)原理很簡(jiǎn)單,你就記住一個(gè)代碼:<marquee>寫上你要移動(dòng)的文字</marquee>,之后就萬(wàn)變不離其中了,呵呵!(1)上下移動(dòng)的文字
效果:
代碼:
<DIV>
<MARQUEE scrollAmount=2 direction=down height=60><CENTER><FONT face=華文彩云 color=#f73809 size=7><B>向下移動(dòng)的文字</B></FONT></CENTER></MARQUEE>
<MARQUEE scrollAmount=2 direction=up height=60><CENTER><FONT face=華文彩云 color=#4db361 size=7><B>向上移動(dòng)的文字</B></FONT></CENTER></MARQUEE>
</DIV>
其中:scrollAmount是控制移動(dòng)速度的,數(shù)值越大速度越快。Direction是控制移動(dòng)方向的, down(下),up(上)。Height則是控制移動(dòng)范圍的高度。
效果示例:跳躍的文字
代碼:
<P><CENTER><MARQUEE direction=up behavior=alternate width=60 height=120><FONT face=隸書 color=red size=15>祝</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80><FONT face=隸書 size=15 color=yellow>大</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120><FONT face=隸書 size=15 color=lime>家</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80><FONT face=隸書 size=15 color=orange>學(xué)</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120><FONT face=隸書 size=15 color=purple>習(xí)</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80><FONT face=隸書 size=15 color=green>愉</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120><FONT face=隸書 size=15 color=navy>快</FONT></MARQUEE></CENTER></P>
注意:本例中增加了一個(gè)控制屬性:behavior=alternate表示文字的移動(dòng)行為是交替出現(xiàn)的。
效果示例:交替跳躍的文字
代碼:
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%; FONT-FAMILY: 幼園">
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER><B>讓</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER><B>你</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER><B>的</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER><B>圖</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER><B>文</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER><B>動(dòng)</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER><B>起</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER><B>來(lái)</B></CENTER></MARQUEE></MARQUEE></FONT></CENTER>
注意:添加或調(diào)整高度值(height)可以得到不同的跳躍效果。(2)左右移動(dòng)的文字
效果:
代碼:
<DIV>
<MARQUEE scrollAmount=3 direction=left width=600><FONT face=
華文行楷 color=Purple size=7><B>
向左移動(dòng)的文字</B></FONT></MARQUEE>
<MARQUEE scrollAmount=3 direction=right width=600><FONT face=
華文行楷 color=navy size=7><B>
向右移動(dòng)的文字</B></FONT></MARQUEE>
</DIV>
其中:scrollAmount
是控制移動(dòng)速度的,數(shù)值越大速度越快。Direction
是控制移動(dòng)方向的, left
(左),right
(右)。width
則是控制移動(dòng)范圍的寬度。效果示例:并列搖動(dòng)的文字
代碼:
<DIV align=center>
<MARQUEE behavior=alternate width=300><FONT face=華文彩云 color=#ff0099 size=7><B>*~*歡迎光臨*~*</B></FONT></MARQUEE>
<MARQUEE direction=right behavior=alternate width=300><FONT face=華文彩云 color=blue size=7><B>*~*熱烈歡迎*~*</B></FONT></MARQUEE></DIV>
注意:width=300設(shè)置的移動(dòng)范圍要比文字所占的寬度小才能產(chǎn)生效果。
效果示例:由中間向兩邊排開的文字
代碼:
<P align=center><FONT face=華文彩云 color=#ff6600 size=7>
<MARQUEE width=300 height=80>歡迎您到APRIL的小屋作客</MARQUEE></FONT><FONT face=華文彩云 color=#00cc00 size=7>
<MARQUEE direction=right width=300 height=80>歡迎您到APRIL的小屋作客</MARQUEE></FONT></FONT></P>
注意:同樣是移動(dòng)范圍值的設(shè)置。
效果示例:波浪式前進(jìn)的文字
代碼:
<P align=center></P>
<MARQUEE scrollAmount=7 direction=up behavior=alternate height=200><DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=400><DIV align=center><FONT face=華文琥珀color=#00cccc size=7>I LOVE APRIL</FONT></DIV></MARQUEE></DIV></MARQUEE>
注意:調(diào)整上移和左移的速度可以得到不同的效果。
二、移動(dòng)圖文篇
把移動(dòng)代碼中要移動(dòng)的文字變成圖片即可
代碼:<marquee><IMG src="你要移動(dòng)的圖片鏈接地址"> </marquee>
**效果體現(xiàn):[原創(chuàng)]遇龍河——田園山水畫(1)模擬電影播放滾動(dòng)圖片
效果1:
代碼:
<DIV>
<MARQUEE scrollAmount=2 direction=down height=80><CENTER>
<IMG src="><br><IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg"></CENTER></MARQUEE>
</DIV>
效果2:
代碼:
<DIV>
<MARQUEE scrollAmount=2 Width =80><CENTER>
<IMG src="> <IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg"></CENTER></MARQUEE>
</DIV>
其中:<IMG src=" ">是輸入圖片鏈接的,你想放多少?gòu)垐D片就加入多少個(gè)鏈接就行了。scrollAmount
是控制移動(dòng)速度的,數(shù)值越大速度越快。Direction
是控制移動(dòng)方向的, down
(下),up
(上),left
(左),right
(右)。Width
、Height
則是控制移動(dòng)范圍的寬度和高度。<br>是換行, 是輸入空格。
(2)圖文穿梭
效果:
代碼:
<CENTER>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=行楷-GB2312 color=#cf34f6 size=6>圖 圖 </FONT></B></MARQUEE><STRONG><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=行楷-GB2312 color=#ff0000 size=6>文 文</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=行楷-GB2312 color=#0033cc size=6>穿 穿</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=行楷-GB2312 color=#006633 size=6>梭 梭 </FONT></B></MARQUEE></CENTER>
其中: 是輸入文字間的空格,可根據(jù)效果需要進(jìn)行調(diào)整。
(3)由中間向兩邊推開圖文
效果:
代碼:
<P align=center><FONT face=華文彩云 color=#ee110e size=5>
<MARQUEE width=300 height=70><IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" >向您展示不同的圖文移動(dòng)效果 </FONT></MARQUEE><FONT face=華文彩云 color=#ee110e size=5><FONT face=華文彩云 color=#ee1111 size=5>
<MARQUEE direction=right width=300 height=70>向您展示不同的圖文移動(dòng)效果<IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg" ></FONT></MARQUEE></FONT></FONT></P>
其中:寬度值(width)要根據(jù)效果需要進(jìn)行調(diào)整。
(4)浮動(dòng)的圖片
效果:
代碼:
<P align=center></P>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=300><DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=600><IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_3.jpg"> <DIV></DIV></MARQUEE></DIV></MARQUEE>
其中:調(diào)整向上和向左移動(dòng)的速度值(scrollAmount)控制圖片浮動(dòng)的效果。
(5)利用動(dòng)態(tài)背景素材帶來(lái)的特效
效果:
|
其實(shí)關(guān)于這一點(diǎn)應(yīng)該算是添加透明FLASH的內(nèi)容,不過(guò)在這就先給大家欣賞一下,還可以配上音樂呢!