让你的图文动起来

昵称289502 2010-02-21

展开全文

顾名思义，本节就是向大家介绍怎样去移动文字和移动图片的。
一、移动文字篇
嗯，首先，大家不要让眼前乱动的文字搞得眼花缭乱，别以为它是很复杂的东东，其实原理很简单，你就记住一个代码：<marquee>写上你要移动的文字</marquee>，之后就万变不离其中了，呵呵！

（1）上下移动的文字
效果：

向下移动的文字向上移动的文字

代码：
<DIV>
<MARQUEE scrollAmount=2 direction=down height=60><CENTER>向下移动的文字</CENTER></MARQUEE>
<MARQUEE scrollAmount=2 direction=up height=60><CENTER>向上移动的文字</CENTER></MARQUEE>
</DIV>
其中：scrollAmount是控制移动速度的，数值越大速度越快。Direction是控制移动方向的， down（下），up（上）。Height则是控制移动范围的高度。

效果示例：跳跃的文字

祝大家学习愉快

代码：
<CENTER><MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80>大</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>家</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80>学</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>习</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=80>愉</MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>快</MARQUEE></CENTER>
注意：本例中增加了一个控制属性：behavior=alternate表示文字的移动行为是交替出现的。

效果示例：交替跳跃的文字

让你的图文动起来代码：
<CENTER>
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER>让</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER>你</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER>的</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER>图</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER>文</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160><CENTER>动</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER>起</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80><CENTER>来</CENTER></MARQUEE></MARQUEE></CENTER>
注意：添加或调整高度值（height）可以得到不同的跳跃效果。

（2）左右移动的文字
效果：

向左移动的文字 向右移动的文字

代码：
<DIV>
<MARQUEE scrollAmount=3 direction=left width=600>向左移动的文字</MARQUEE>
<MARQUEE scrollAmount=3 direction=right width=600>向右移动的文字</MARQUEE>
</DIV>
其中：scrollAmount是控制移动速度的，数值越大速度越快。Direction是控制移动方向的， left（左），right（右）。width则是控制移动范围的宽度。

效果示例：并列摇动的文字

*~*欢迎光临*~* *~*热烈欢迎*~*

代码：
<DIV align=center>
<MARQUEE behavior=alternate width=300>*~*欢迎光临*~*</MARQUEE>
<MARQUEE direction=right behavior=alternate width=300>*~*热烈欢迎*~*</MARQUEE></DIV>
注意：width=300设置的移动范围要比文字所占的宽度小才能产生效果。

效果示例：由中间向两边排开的文字

欢迎您到APRIL的小屋作客欢迎您到APRIL的小屋作客

代码：

<MARQUEE width=300 height=80>欢迎您到APRIL的小屋作客</MARQUEE>
<MARQUEE direction=right width=300 height=80>欢迎您到APRIL的小屋作客</MARQUEE>
注意：同样是移动范围值的设置。

效果示例：波浪式前进的文字

I LOVE APRIL

代码：

<MARQUEE scrollAmount=7 direction=up behavior=alternate height=200><DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=400><DIV align=center>I LOVE APRIL</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"> <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则是控制移动范围的宽度和高度。 是换行，是输入空格。

（2）图文穿梭
效果：
图图 文文 穿穿 梭梭代码：
<CENTER>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10">图图 </MARQUEE><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" width=109> 
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10">文文</MARQUEE><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg" width=109> 
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10">穿穿</MARQUEE><IMG height=67 src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" width=109> 
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10">梭梭 </MARQUEE></CENTER>
其中： 是输入文字间的空格，可根据效果需要进行调整。

（3）由中间向两边推开图文
效果：

让你的图文动起来 - 乘成 - 乘成休闲吧向您展示不同的图文移动效果向您展示不同的图文移动效果

代码：

<MARQUEE width=300 height=70><IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_1.jpg" >向您展示不同的图文移动效果 </MARQUEE>
<MARQUEE direction=right width=300 height=70>向您展示不同的图文移动效果<IMG src="http://image7.360doc.com/DownloadImg/2010/02/2121/2374940_2.jpg" ></MARQUEE>
其中：宽度值（width）要根据效果需要进行调整。

（4）浮动的图片
效果：

代码：

<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>
其中：调整向上和向左移动的速度值（scrollAmount）控制图片浮动的效果。

（5）利用动态背景素材带来的特效
效果：

我说你是人间的四月天；
笑响点亮了四面风；轻灵
在春的光艳中交舞着变。

你是四月早天里的云烟，
黄昏吹着风的软，星子
在无意中闪，细雨点洒在花前。

那轻，那娉婷，你是鲜妍
百花的冠冕你戴着，你是
天真，庄严，你是夜夜的月圆。

雪化后那片鹅黄，你像；新鲜
初放芽的绿，你是；柔嫩喜悦
水光浮动着你梦期待中的白莲。

你是一树一树的花开，是燕
在梁间呢喃，——你是爱，是暖，
是希望，你是人间四月天！

其实关于这一点应该算是添加透明FLASH的内容，不过在这就先给大家欣赏一下，还可以配上音乐呢！