06

Dreamweaver8

是

美

国

Macromedia

公司

开

发

的

集

网

页

制

作

和

网

站

管

理

于

一

身

的

所

见

即所得

的网

页

编辑

器

，

具

有

强

大

的

编

辑

功

能

，

能

够

方

便

地实现

对

网

页创作

的

灵

感

，

使

设计

者

不必

编

写

大

量

的

HTML

代

码

就能

够

实现

特

效

。

平

常

在

网

页

上

看

到

的公

告

板

的

滚

动

文

字

、

最

新的

焦

点

新

闻

图

片滚

动

、

产

品

的

宣

传

等都

可

以

利用

Dreamweaver8

轻

松

实现，

旨

在对

以

上

技巧

进

行

说明

。

1

留白滚动字幕

和图

片

在

网

页

中出

现

一

些

滚

动

字

幕

或

滚

动

图

片

会

使

网

页

增

效

不

少

。

下

面

主

要

介绍

一下

有

关

滚

动

特

效

的代

码

：

behavior

=scroll

direction

=up

width

=180

height

=

130

scrollamount=1

scrolldelay=90

οnmοuseοver='this.stop

()

'

οnmοuseοut='this.start

()

'>

滚

动

内

容

(

文

字

或

图

片

)

－

quee>

各

参

数

详

解

(

1

)

...

移动属性

的设

置

,

这

种移动

不仅仅

局限于

文

字，

也

可

以

应

用于

图

片

、

表

格

等等

。

(

2

)

direction

。

表

示

滚

动

的

方

向

，

默

认

为

从

右

向

左

：

←←←

。

可

选

的

值

有

right

、

down

、

up

。

滚

动

方

向分

别

为

：

right

表示

→→→

，

up

表示

↑

，

down

表示

↓

。

(

3

)

width

和

height

，

表示

滚

动

区

域

的

大

小

，

width

是

宽

度

，

height

是

高

度

。

特

别

是

在

做

垂

直

滚

动

的

时

候

，

一

定

要

设

height

的

值

。

(

4

)

onMouseOut=start

()

........

鼠

标移

出

状

态滚

动

。

onMouseOver=stop

()

.........

鼠

标

经

过

时

停

止

滚

动

。

(

5

)

scrollAmount

。

它表示速度

，

值越

大

速度越快

。

如

果

没

有

它

，

默认

为

6

，

建

议

设为

1

～

3

比较

好

。

(

6

)

scrollDelay

，

这也是

用

来

控制

速度

的，

默认

为

90

，

值

越

大

，

速度越

慢

。

通

常

scrollDelay

是不

需

要

设

置

的

。

(

7

)

behavior

，用

它

来

控制属性

，

默认

为

scroll

(

循

环

滚

动

)

，可

选

的

值

有

alternate

(

交

替

滚

动

)

、

slide

(

幻灯

片

效

果

，

指

的

是

滚

动一

次，

然后

停

止

滚

动

)

。

(

8

)

onmouseover

表示

鼠

标

经

过

的

动

作

(

this.stop

()

表示

滚

动

停

止

)，

onmouseout

表示

鼠

标

离

开

时

的

动

作

(

this.start

()

表示

滚

动

继

续

)

，

还

可

以

根

据

需

要

设

置点

击

链

接

其

他

内

容

。

以

上

技巧

可

以

实现

文

字

和

图

片

上

下

左

右

滚

动

，

但是

滚

动

时

是

全

部

内

容

显

示

完

毕

，

显

示

区

域

空

白

后

再

循

环

显

示

，

因

此

这

种

显

示

方

法

多

见

于

文

字

以

公告的

形

式

使

用

。

2

无

缝滚动

图

片

经常

看

到

的许

多

产

品

、

新

闻

等

图

片

的

显

示

都是不

留

空

白

的，

如

果

要

实现

这

种

效

果

可

以采

用

如

下

方

法

：

一

个

设定

宽

度

并

且

隐藏

超

出

它

宽

度

的内

容

的

容

器

demo

，

里

面

放

demo1

和

demo2

，

demo1

是

滚

动

内

容

,demo2

为

demo1

的

直

接

克隆

，

通过

不

断

改变

demo1

的

scrollTop

或

者

scrollLeft

达

到

滚

动

的目的，

当

滚

动

至

demo1

与

demo2

的

交

界

处

时直

接

跳

回

初

始

位

置

，

因

为

demo1

与

demo2

一

样

，

所以

分

不

出

跳

动

的

瞬

间

，

从

而

达

到

“

无

缝

”

滚

动

的目的

。

以

下

以

向

左

和

向

上

滚

动

为

例

。

2.1

向

左滚动

代码

var

speed=30

demo2.innerHTML=demo1.innerHTML

function

Marquee

()

{

if

(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else

{

demo.scrollLeft++

Dreamweaver

8

实

现

滚动

图

片

文

字

赵丽华

，

卢旭英

，

肖凯

(

西

安

通

信

学

院

，

西

安

710106

)

摘

要

：

结合在

日

常使

用

经

验，

介绍

了

利

用

Dreamweaver8

实

现

网

页上

文

字

和

图

片

的

滚

动

技

巧

，通过

使

用

这些

技

巧

可

以

制

作

样

式丰富的网

页

。

关键词

：

Dreamweaver

8

；

滚

动

；

图

片

；

文

字

The

Implementation

of

Rolling

Text

and

Pictures

by

Dreamweaver

8

ZHAO

Lihua

,

LU

Xuying

,

XIAO

Kai

(

Xi

’

an

Communications

Institute

,

Xi

’

an

710106

)

Abstract

：

Vsing

Dreamweaver8

implementation

of

the

rolling

pictures

and

text

are

introduced

in

this

paper

by

combining

with

daily

Vsing

experience.The

various

fine

Web

pages

can

be

made

by

using

these

skills.

Key

words

：

Dreamweaver

8

;

Rolling

;

Pictures

;

Text

作者简介

：

赵

丽

华

(

1975-

)

，

女

，

硕士

，

讲

师

，研究

方

向

：

智

能

信息

处

理

与

网

络

安

全

。

收

稿

日

期：