顾名思义,本节就是向大家介绍怎样去移动文字和移动图片的。一、移动文字篇
嗯,首先,大家不要让眼前乱动的文字搞得眼花缭乱,别以为它是很复杂的东东,其实原理很简单,你就记住一个代码:<marquee>写上你要移动的文字</marquee>,之后就万变不离其中了,呵呵!(1)上下移动的文字
效果:
代码:
<DIV>
<MARQUEE scrollAmount=2 direction=down height=60><CENTER><FONT face=华文彩云 color=#f73809 size=7><B>向下移动的文字</B></FONT></CENTER></MARQUEE>
<MARQUEE scrollAmount=2 direction=up height=60><CENTER><FONT face=华文彩云 color=#4db361 size=7><B>向上移动的文字</B></FONT></CENTER></MARQUEE>
</DIV>
其中:scrollAmount是控制移动速度的,数值越大速度越快。Direction是控制移动方向的, down(下),up(上)。Height则是控制移动范围的高度。
效果示例:跳跃的文字
代码:
<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>学</FONT></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120><FONT face=隶书 size=15 color=purple>习</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>
注意:本例中增加了一个控制属性:behavior=alternate表示文字的移动行为是交替出现的。
效果示例:交替跳跃的文字
代码:
<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>动</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></FONT></CENTER>
注意:添加或调整高度值(height)可以得到不同的跳跃效果。(2)左右移动的文字
效果:
代码:
<DIV>
<MARQUEE scrollAmount=3 direction=left width=600><FONT face=
华文行楷 color=Purple size=7><B>
向左移动的文字</B></FONT></MARQUEE>
<MARQUEE scrollAmount=3 direction=right width=600><FONT face=
华文行楷 color=navy size=7><B>
向右移动的文字</B></FONT></MARQUEE>
</DIV>
其中:scrollAmount
是控制移动速度的,数值越大速度越快。Direction
是控制移动方向的, left
(左),right
(右)。width
则是控制移动范围的宽度。效果示例:并列摇动的文字
代码:
<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设置的移动范围要比文字所占的宽度小才能产生效果。
效果示例:由中间向两边排开的文字
代码:
<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>
注意:同样是移动范围值的设置。
效果示例:波浪式前进的文字
代码:
<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>
注意:调整上移和左移的速度可以得到不同的效果。
二、移动图文篇
把移动代码中要移动的文字变成图片即可
代码:<marquee><IMG src="你要移动的图片链接地址"> </marquee>
**效果体现:[原创]遇龙河——田园山水画(1)模拟电影播放滚动图片
效果1:
代码:
<DIV>
<MARQUEE scrollAmount=2 direction=down height=80><CENTER>
<IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg"
><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="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg"
> <IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg"></CENTER></MARQUEE>
</DIV>
其中:<IMG src=" ">是输入图片链接的,你想放多少张图片就加入多少个链接就行了。scrollAmount
是控制移动速度的,数值越大速度越快。Direction
是控制移动方向的, down
(下),up
(上),left
(左),right
(右)。Width
、Height
则是控制移动范围的宽度和高度。<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>
其中: 是输入文字间的空格,可根据效果需要进行调整。
(3)由中间向两边推开图文
效果:
代码:
<P align=center><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE width=300 height=70><IMG src="//image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" >向您展示不同的图文移动效果 </FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=5><FONT face=华文彩云 color=#ee1111 size=5>
<MARQUEE direction=right width=300 height=70>向您展示不同的图文移动效果<IMG src="//image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg" ></FONT></MARQUEE></FONT></FONT></P>
其中:宽度值(width)要根据效果需要进行调整。
(4)浮动的图片
效果:
代码:
<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="//image7.360doc.com/DownloadImg/2010/02/2121/2374940_3.jpg"> <DIV></DIV></MARQUEE></DIV></MARQUEE>
其中:调整向上和向左移动的速度值(scrollAmount)控制图片浮动的效果。
(5)利用动态背景素材带来的特效
效果:
|
其实关于这一点应该算是添加透明FLASH的内容,不过在这就先给大家欣赏一下,还可以配上音乐呢!