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

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

《如何制作滚动图片和滚动文字.docx》由会员分享，可在线阅读，更多相关《如何制作滚动图片和滚动文字.docx（17页珍藏版）》请在冰点文库上搜索。

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

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

用HTML的活动字幕标记所需的代码最少，且能以较少下载时间换来不错的效果。

该标记语法格式如下：

字幕内容

各参数详解：

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、每行字的前后可以分别用和的格式定义每行字的颜色，大小和字体，如果哪项不需要的话，把代码去掉就行。

11、表示倾斜，表示下划线，表示加粗，加粗有时可以是。

12、
表示换行。

13、 表示空格

图片滚动代码示例1（从右向左滚动）

图片滚动代码示例2（从下往上滚动）

注:

align=centervalign=middle一个水平,一个垂直,但是对于div标签不能用valign.

给滚动图片加上链接的代码

......

参数解释

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默认状态向左。

从右向左滚动

从左向右滚动

从下向上滚动

从上向下滚动

6.behavior属性:

指定文本的滚动方式，分为三种:

Scroll:

从一端消失后，在另一端出现并继续滚动。

一圈一圈地滚动

Slide:

从一端滚动，接触到另一端后停止

只滚动一次就停止

Alternate:

从一端滚动到另一端后，反向滚动。

来回滚动

7.border=0:

边框线等于0也就是说没有边框线

如何制作滚动字幕/图片

一、滚动字幕的HTML最基本语法是：

要滚动的文字

　　这是最原始，最简单，没有任何修饰的滚动，

而要它能显示出各种不同的效果需要对其进行各种参数的设定，

比如让大家看一下下面这段代码：

#660099;fontsize=20"

scrollAmount=2scrollDelay=50direction=up

width=480height=150behavior=scroll>

·

欢迎来到γ蚊ж子ま的博客

·让我们建立和谐环境，

促进交流

·

建设良好的博客氛围，促进共同进步

·为了美化博客，

丰富博客

target=_blank>（点此有惊喜）

·丰富生活，

让我们一起努力

·加油，

我的朋友

　　效果如下：

　　代码中各参数详解

（请仔细看每行的代码和其相对应的显示效果）：

　　a）color:

#660099;fontsize=20

用来定义所有滚动字体的大小和颜色，

如果要单独定义某行字体，则如代码中那样，

在每句前后加和，

如果对字体的定义都是一样的，那么只要定义前面的了，

后面的就不需要了。

　　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）如果要对文字进行超链接，

只要在文字前后加和，

如代码中所写的那样，target=_blank表示链接在新窗口中打开。

　　i）每行字的前后

和用定义每行字的颜色，大小和字体，

如果哪项不需要的话，把代码去掉就行。

　　j）用WORLD编辑过东西的人都知道，表示倾斜，

表示下划线，表示加粗，加粗有可以是。

　　k）
表示换行。

ＰＳ：

滚动方法虽然是教了，而我上面的代码也只是演示了一下综合效果，

但是看到很多朋友还是不会灵活运用，只照搬我上面的那段代码。

其实要做简单的滚动的话复制下面这段代码就行了，

要表现出其他效果，按照我说的增加参数就行了。

 width=480height=180behavior=scroll>滚动文字　

　　二、既然知道了滚动字幕如何制作了，

制作滚动图片就应该没什么问题了，简单图片滚动的代码如下：

direction=rightwidth=190height=250>

 border=0>

　　参数说明：

　　a）第一个的width和height表示滚动窗口的大小，

后四个用来定义滚动图片的大小，图片的大小最好别超过滚动窗口的大小，

如果图片的高度值大于滚动窗口的高度值，

那么最后效果显示的窗口高度是图片的高度！

　　b）如果要增加图片只要加

 src="你喜欢的图片地址"border=0>就行了！

　　c）如果要对图片进行链接，只要在

src="你喜欢的图片地址"border=0>前后加

target=_blank>和就行了，同样，target=_blank

表示链接在新窗口中打开！

　　至于滚动图片的效果在这里就不演示了！

　　补充：

滚动字体特效中的各种参数不是单一的，

而是可以随意组合的，比如下面这段代码的简单组合：

 behavior=alternateheight=80width=499>

direction=rightbehavior=alternateheight=50>

欢迎光临，

祝您快乐！

从下面的演示效果中可以看出其奇妙性，

大家就可以知道，可以组合的方式是多种多样的！

帮你制作个性名片－飘动的图片

       制作一个，个性名片，在访问博友的博客时，贴在留言里，其效果要比公用留言贴图好得多。

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

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

其步骤如下：

一、个性名片的完整代码

background=你喜欢的图片边框地址>

 background=你喜欢的背景图片地址border=0>

15pt;mso-bidi-font-size:

12.0pt;mso-fareast-font-family:

隶书">

normal;FONT-SIZE:

25pt;LINE-HEIGHT:

normal;FONT-STYLE:

normal;FONT-VARIANT:

normal"face=苏新诗卵石体

color=#cf34f6size=6>小阁（换上你的名字）

normal;FONT-SIZE:

25pt;LINE-HEIGHT:

normal;FONT-STYLE:

normal;FONT-VARIANT:

normal"face=方正小篆体

 color=#ff0000size=7>拜访

normal;FONT-SIZE:

25pt;LINE-HEIGHT:

 normal;FONT-STYLE:

normal;FONT-VARIANT:

normal"face=方正水柱简体

 color=#00ffffsize=4>朋友

（上述的代码你也可不要）

cellPadding=0width=430align=centerborder=0>

 height=300>

alpha（opacity=100,style=2,finshopacity=0）;

WIDTH:

200px;HEIGHT:

160px"height=160src="你自己或亲朋的图片地址"

width=200>

glow（color=ff00ff,strength=10）;FONT:

30ptArial;

WIDTH:

420px;COLOR:

red;HEIGHT:

0px">

shadow（color=#9900ff,strength=25）;WIDTH:

420px">