如何制作滚动图片和滚动文字

如何制作滚动图片和滚动文字
用HTML的<marquee>活动字幕标记所需的代码最少，且能以较少下载时间换来不错的效果。

该标
记语法格式如下：
<marquee align=left/center/right/top/bottom bgcolor=#n direction=left/right/up/down behavior=type height＝n hspace＝n scrollamount=n Scrolldelay=n width=n VSpace=n loop＝n>字幕内容</marquee>
各参数详解：
1、Align：是设定活动字幕水平对齐的,分左(left)，中(center)，右(right);
Valign:是设定活动字幕垂直对齐的,分顶(top),中(middle),底(bottom).
2、Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。

3、Direction：用于设定活动字幕的滚动方向向左、向右、向上、向下。

4、Behavior。

用它来控制滚动方式，默认为scroll(从一端到另一端循环滚动)，可选的值还有
alternate(在两端
之间来回滚动)、slide(幻灯片效果，从一端到另一端滚动一次，然后停止滚动)
5、Height和Width：设定滚动区域的高度和宽度.(特别在制作垂直滚动时,一定要设height的值）
6、Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。

7、Scrollamount：用于设定活动字幕的滚动速度，值越大速度越快。

默认为6，建议设为1～3比较
好。

8、Scrolldelay：用于设定滚动两次之间的延迟时间。

默认为90，值越大，速度越慢。

通常scrollDelay
是不需要设置的。

9、Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。

10、每行字的前后可以分别用<FONT color=#990066 size=4 face=隶书>和</FONT>的格式定义每
行字的颜色，大小和字体，如果哪项不需要的话，把代码去掉就行。

11、<I></I>表示倾斜，<U></U>表示下划线，<B></B>表示加粗，加粗有时可以是
<STRONG></STRONG>。

12、<BR>表示换行。

13、&nbsp;表示空格
图片滚动代码示例1(从右向左滚动)
<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">
<img border="0" src=" 图片地址1">
<img border="0" src=" 图片地址2">
</marquee>
图片滚动代码示例2(从下往上滚动)
<marquee align=center direction=up scrollamount=1 scrolldelay=3 valign=middle
behavior="scroll">
<img border="0" src="图片地址1">
<img border="0" src="图片地址2">
</marquee>
注:align=center valign=middle 一个水平,一个垂直,但是对于div标签不能用valign.
给滚动图片加上链接的代码
<marquee behavior=alternate height=120 width="90">
<P align=left>
<P align=center>
<a href="链接地址" target="_blank"><IMG src="图片地址" width=90 border="0"></a>
<a href="链接地址" target="_blank"><IMG src="图片地址" width=90 border="0"></a>
......
</P>
</MARQUEE>
参数解释
1.align：是设定活动字幕水平对齐的,分左(left)，中(center)，右(right);
valign:是设定活动字幕垂直对齐的,分顶(top),中(middle),底(bottom).
2.height和width:设定滚动区域的高度和宽度.(特别在制作垂直滚动时,一定要设height的值）
3.scrollamount：用于设定活动字幕的滚动速度，值越大速度越快。

默认为6，建议设为1～3比较好。

4.scrolldelay：用于设定滚动两次之间的延迟时间。

默认为90，值越大，速度越慢。

通常scrolldelay
是不需要设置的。

5.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。

<marquee direction=left>从右向左滚动</marquee>
<marquee direction=right>从左向右滚动</marquee>
<marquee direction=up>从下向上滚动</marquee>
<marquee direction=down>从上向下滚动</marquee>
6.behavior属性:指定文本的滚动方式，分为三种:
Scroll:从一端消失后，在另一端出现并继续滚动。

<marquee behavior=scroll>一圈一圈地滚动</marquee>
Slide:从一端滚动，接触到另一端后停止
<marquee behaviro=slide>只滚动一次就停止</marquee>
Alternate:从一端滚动到另一端后，反向滚动。

<marquee behavior=alternate>来回滚动</marquee>
7.border=0:边框线等于0 也就是说没有边框线
如何制作滚动字幕/图片
/blog/stati c/1206886200611230153561/?fromdm&from Search&isFromSearchEngine=yes
一、滚动字幕的HTML最基本语法是：
<MARQUEE>要滚动的文字</MARQUEE>
这是最原始，最简单，没有任何修饰的滚动，而要它能显示出各种不同的效果需要对其进行各种参
数的设定，
比如让大家看一下下面这段代码：
<MARQUEE style="color:#660099;font size=20"
scrollAmount=2 scrollDelay=50 direction=up width=480 height=150 behavior=scroll>
<FONT color=blue><I>·
欢迎来到γ蚊ж子ま的博客</FONT></I><BR>
<FONT color=#660099 size=3>·<U>让我们建立和谐环
境，
促进交流</U></FONT><BR>
<FONT color=#990066 size=4 face=隶书>·
建设良好的博客氛围，促进共同进步</FONT><BR> <FONT color=#990033 size=3>·为了美化博客，
丰富博客<A
href="/m/wenzi"
target=_blank>(点此有惊喜)</A></FONT><BR> <FONT color=#990099 size=4><B>·丰富生活，让我们一起努力</B></FONT><BR>
<FONT color=blue face=华文行楷>·加油，
我的朋友</FONT></MARQUEE>
效果如下：
代码中各参数详解
(请仔细看每行的代码和其相对应的显示效果)：
a)color:#660099;font size=20
用来定义所有滚动字体的大小和颜色，如果要单独定义某行字体，则如代码中那样，
在每句前后加<FONT color=#990066 size=4>和
</FONT>，
如果对字体的定义都是一样的，那么只要定义前面的
了，
后面的就不需要了。

b)scrollAmount表示速度，值越大速度越快。

如果没有它，默认为6，建议设为1～3比较好。

c)scrollDelay也是用来控制速度的，
表示走走停停，默认为90，值越大，速度越慢。

通常scrollDelay是不需要设置的。

d)direction很明显是表示滚动的方向，
默认为从右向左：←，因此如果是向左滚动的话不需
要次参数。

其他可选的值还有right，down，up。

滚动方向分别为：right表示→，up表示↑，down表
示↓。

e)width和height用来表示滚动区域的大小，
width是宽度，height是高度。

特别是在做垂直滚动的时候，一定要设height的值。

f)bgcolor表示滚动区域的背景颜色，
如果滚动文字不要背景的话把这段删了就可以了。

g)behavior是来控制滚动属性的，
默认为循环滚动(scroll)，同样，如果是循环滚动的
话可以不需要此参数。

其他可选的值还有alternate(交替滚动)，
slide(幻灯片效果，指的是滚动一次，然后停止滚动)。

h)如果要对文字进行超链接，
只要在文字前后加<A href="链接地址"
target=_blank>和</A>，
如代码中所写的那样，target=_blank表示链接在新
窗口中打开。

i)每行字的前后<FONT color=#990066 size=4
face=隶书>
和</FONT>用定义每行字的颜色，大小和字体，如果哪项不需要的话，把代码去掉就行。

j)用WORLD编辑过东西的人都知道，<I>表示倾
斜，
<U>表示下划线，<B>表示加粗，加粗有可以是
<STRONG>。

k)<BR>表示换行。

ＰＳ：滚动方法虽然是教了，而我上面的代码也只是
演示了一下综合效果，
但是看到很多朋友还是不会灵活运用，只照搬我上面
的那段代码。

其实要做简单的滚动的话复制下面这段代码就行了，要表现出其他效果，按照我说的增加参数就行了。

<MARQUEE scrollAmount=2 scrollDelay=50
direction=up
width=480 height=180 behavior=scroll>滚动文字
</MARQUEE>
二、既然知道了滚动字幕如何制作了，
制作滚动图片就应该没什么问题了，简单图片滚动的
代码如下：
<MARQUEE scrollAmount=4 scrollDelay=60
direction=right width=190 height=250>
<IMG width=190 height=250 src="你喜欢的图片地址
" border=0>
<IMG width=190 height=250 src="你喜欢的图片地址
" border=0>
<IMG width=190 height=250 src="你喜欢的图片地址
" border=0>
<IMG width=190 height=250 src="你喜欢的图片地址
"
border=0></MARQUEE>
参数说明：
a)第一个的width和height表示滚动窗口的大
小，
后四个用来定义滚动图片的大小，图片的大小最好别
超过滚动窗口的大小，
如果图片的高度值大于滚动窗口的高度值，
那么最后效果显示的窗口高度是图片的高度！
b)如果要增加图片只要加<IMG width=190
height=250
src="你喜欢的图片地址" border=0>就行了！
c)如果要对图片进行链接，只要在<IMG
width=190 height=250
src="你喜欢的图片地址" border=0>前后加<A href="
链接地址"
target=_blank>和</A>就行了，同样，target=_blank
表示链接在新窗口中打开！
至于滚动图片的效果在这里就不演示了！
补充：滚动字体特效中的各种参数不是单一的，而是可以随意组合的，比如下面这段代码的简单组合：
<MARQUEE scrollAmount=8 direction=up
behavior=alternate height=80 width=499>
<MARQUEE scrollAmount=4
direction=right behavior=alternate height=50> <font color=#990066 size=5 face=华文行楷>欢迎光
临，
祝您快乐！</font></MARQUEE></MARQUEE>
从下面的演示效果中可以看出其奇妙性，
大家就可以知道，可以组合的方式是多种多样的！帮你制作个性名片－飘动的图片
制作一个，个性名片，在访问博友的博客时，贴在留言里，其效果要比公用留言贴图好得多。

因为它即突出了你的个性，同时也展示了你博客的特色，也很受博友们的欢迎。

英雄现简单介绍一下留言个性名片的制作方法，希望大家能够喜欢。

其步骤如下：
一、个性名片的完整代码
<P align=center>
<TABLE height=380 cellSpacing=6 cellPadding=0 width=430
background=你喜欢的图片边框地址>
<TBODY>
<TR>
<TD>
<TABLE height=380 cellSpacing=0 cellPadding=0 width=430 align=center
background=你喜欢的背景图片地址border=0>
<TBODY>
<TR>
<TD>
<P align=center><SPAN lang=EN-US style="FONT-SIZE: 15pt; mso-bidi-font-size:
12.0pt; mso-fareast-font-family: 隶书">
<MARQUEE scrollAmount=1 width=50 height=40 align="center" scrolldely="10">
<B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 25pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=苏新诗卵石体
color=#cf34f6 size=6>小阁（换上你的名字）</FONT></A></B></A>
</MARQUEE><STRONG><IMG height=60 src="你喜欢的动画地址" width=70>
</A></STRONG>
<MARQUEE scrollAmount=1 width=50 height=40 align="center" scrolldely="10">
<B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 25pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=方正小篆体
color=#ff0000 size=7>拜访</FONT></A></B></A></MARQUEE><STRONG>
<IMG height=60 src="你喜欢的动画地址" width=70></A></STRONG>
<MARQUEE scrollAmount=1 width=50 height=40 align="center" scrolldely="10">
<B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 25pt; LINE-HEIGHT:
normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=方正水柱简体
color=#00ffff size=4>朋友</FONT></A></B></A></MARQUEE></FONT>
</MARQUEE><EM></EM></FONT></EM></SPAN></P></TD></TR> <TBODY>
<TR>
<TD>
（上述的代码你也可不要）
<TABLE borderColor=#228b22 cellSpacing=0 borderColorDark=#00ced1
cellPadding=0 width=430 align=center border=0>
<MARQUEE scrollAmount=3 scrollDelay=0 behavior=alternate>
<MARQUEE scrollAmount=2 scrollDelay=0 direction=down behavior=alternate
height=300>
<MARQUEE scrollAmount=1 scrollDelay=0 behavior=alternate width=400>
<P align=center><IMG style="FILTER: alpha(opacity=100,style=2,finshopacity=0 );
WIDTH: 200px; HEIGHT: 160px" height=160 src="你自己或亲朋的图片地址"
width=200> </P></MARQUEE></MARQUEE></MARQUEE>
<TBODY></TBODY></TABLE></TD></TR>
<TBODY>
<TR>
<TD>
<DIV style="FILTER: glow(color=ff00ff, strength=10); FONT: 30pt Arial;
WIDTH: 420px; COLOR: red; HEIGHT: 0px">
<DIV style="FILTER: shadow(color=#9900ff, strength=25); WIDTH: 420px">
<CENTER>
<MARQUEE scrollAmount=2 scrollDelay=10>< FONT face=方正水柱简体
color=#ffff00 size=6>小阁欢迎您的光临，您的支持就是我的动力。

英雄问候远方的朋友，您好吗？虽然我们不曾谋面，虽然我们远隔千山万水，可这无形的网络，架起了我们沟通的桥梁，建立了我们的友情。

感谢网络让我们在此相聚、相识、相知，这是天赐网缘。

遇上您是我的福份，您是我一生的朋,小阁永远记挂您！（换上你的文字）
</FONT></MARQUEE></STRONG></CENTER></DIV>
二、代码说明
1、IMG style="FILTER: alpha(opacity=100,style=2,finshopacity=0 ); WIDTH:
200px; HEIGHT: 160px"是使“你自己或亲朋的图片地址”产生朦胧效果的代码。

其中WIDTH: 200px;是用象素表示的（px是象素符号）图片的宽度，HEIGHT: 160px是用象素表示的图片的高度。

WIDTH是英文大写宽的代码
，HEIGHT是英文大写高的代码。

2、<MARQUEE scrollAmount=3 scrollDelay=0 behavior=alternate>
<MARQUEE scrollAmount=2 scrollDelay=0 direction=down
behavior=alternate
height=300>
<MARQUEE scrollAmount=1 scrollDelay=0 behavior=alternate width=400>
这些是控制图片移动的代码。

蓝色的1、2、3是控制图片移动的速度，数字越大移动的越快。

3、<DIV style="FILTER: glow(color=ff00ff, strength=10); FONT: 30pt Arial;
WIDTH: 420px; COLOR: red;
HEIGHT: 0px">这是使文字产生放射阴影效果的代码。

<DIV style="FILTER: shadow(color=#9900ff, strength=25); WIDTH: 420px">
这是使文字产生立体阴影效果的代码。

4、<MARQUEE scrollAmount=2 scrollDelay=10 align="left">
这是控制文字移动的代码，蓝色的数字2是文字移动的速度，数字越大移动的越快。

三、使用方法
1、把代码复制粘贴到你的日志里进行编辑，按照说明，把红色标明的图片地址和文字，换成你的图片地址和文字。

2、点击“预览”，查看效果，满意后点击“保存为草稿”待用。

3、访问朋友博客时，复制个性名片，粘贴到朋友的留言栏里。

小阁就介绍到这，请大家试试吧，很有意思的。

如何制作文字在图片上滚动的音画？
龙城博客不少网友的日志音、画很精美。

有兴趣的网友，不妨跟着以下步骤操作，也能制作出不错的东东：
1，发布新日志。

在日志写入框下端的源代码前打√。

即下图的左下角：
2，把以下代码复制粘贴过去：
<TABLE style="BACKGROUND-REPEAT: no-repeat"borderColor=#ffff00height=300 width=500 border=2>
<TBODY>
<TR>
<TD vAlign=top background=背景图片链接></TD></TR></TBODY></TABLE>
说明：
ffff00 代表颜色
height=300代表图片高度
width=500 代表图片宽度
border=2代表图片外框厚度
以上数据，为回味童年的快乐图片数据，博友们可以参照调整。

蓝色字体处都可以根据要求调整。

对了，图片链接地址，以自己空间的图为例：图片右键，再点属性就可复制图片地址了。

3，在源代码前点一下，把√去掉。

图片成功显示。

您可以在图片上任意编辑要滚动的文字啦。

文字大小色彩等，都可以点日志写入框上面的小图标调整。

4，再在源代码前打√。

5，在文字代码前复制粘贴以下代码：
<MARQUEE style="WIDTH: 446px; HEIGHT: 288px" scrollAmount=1 scrollDelay=77 direction=up nmouseover="this.stop()"
说明："WIDTH: 446px; HEIGHT: 288px" 表示滚动区域的大小，以上数据，为回味童年的快乐图片上文字滚动的数据，博友们可以参照调整。

6，加入音乐。

再√起源代码，复制粘贴进去以下代码：
<embed src="你的音乐地址" width="长度参数" height="高度参数" type="audio/mpeg" loop="true"></embed>
说明：
" width="长度参数" height="高度参数" 是播放器外观数据，如果不想显示，就把参数设为0吧。

在"你的音乐地址"处添加喜欢的音乐地址。

把源代码前的√去掉，保存发布，就OK了。

亲爱的博友们，我也是在学习中，操作步骤叙述得或许不够简洁明了，我希望与您共同学习。