网页的动态、多媒体效果
时间：2007-04-30 来源：jshmsch
在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。
<marquee direction=right>啦啦啦，我从左向右移！</marquee>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>
啦啦啦，我会移动耶！
</marquee>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
********************************************
对齐下沿。对齐中间。对齐上沿。
类别：默认分类 | 添加到搜藏 | 浏览() 网友评论： 1 匿名网友 - 2006年12月10日 星期日 00:29 fdasdfaDASJ发射机·♀2000000000000000000000000000000000000000000000000000000000 2 怎么解释爱 - 2007年01月09日 星期二 05:13 http://tech.china.com/zh_cn/netschool/homepage/dreamweaver/develop/2005061501.html
也可以在这儿看 3 怎么解释爱 - 2007年01月09日 星期二 05:16 基本语法
<marquee>...</marquee>
移动属性的设置,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>从右向左移！</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈绕着走！</marquee>
<marqueebehavior=slide>只走一次就歇了！</marquee>
<marqueebehavior=alternate>来回走</marquee>
循环
<loop=#>#=次数；若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟！</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>
</font>
4 怎么解释爱 - 2007年01月09日 星期二 05:17 底色
<bgcolor=#>#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>颜色！</marquee>
面积
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面积！</marquee>
方向
<direction=#>#=left,right,up,down<marqueedirection=left>从右向左移！</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈绕着走！</marquee>
<marqueebehavior=slide>只走一次就歇了！</marquee>
<marqueebehavior=alternate>来回走</marquee>
5 怎么解释爱 - 2007年01月09日 星期二 05:17 循环
<loop=#>#=次数；若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟！</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>颜色！</marquee>
面积
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面积！</marquee>
8-1 滚动字幕<marquee>
<marquee>标签可以实现元素在网页中移动的效果，以达到动感十足的视觉效果。<marquee>标签是一个成对的标签。应用格式为:
<marquee>...</marquee>
<marquee>标签有很多属性，用来定义元素的移动方式:
<marquee>的属性
| 属 性 | 描 述 |
| align | 指定对齐方式top,middle,bottom |
| scroll | 单向运动 |
| slide | 如幻灯片,一格格的，效果是文字一接触左边就停止。 |
| alternate | 左右往返运动 |
| bgcolor | 设定文字卷动范围的背景颜色 |
| loop | 设定文字卷动次数，其值可以是正整数或 infinite表示无限次 默认为无限循环 |
| height | 设定字幕高度 |
| width | 设定字幕宽度 |
| scrollamount | 指定每次移动的速度,数值越大速度越快 |
| scrolldelay | 文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快 |
| hspace | 指定字幕左右空白区域的大小 |
| vspace | 指定字幕上下空白区域的大小 |
| direction | 设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动 |
| behavior | 指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，alternate表示滚动到一方后向相反方向滚动。 |
8-1 实例h8-1.html
<html>
<body>
<center>
<font face="字体2" size=6 color="#ff0000">
滚动字幕
</font><br>
<marquee>啦啦啦~~~我会跑了</marquee>
<p>
<marquee height="200" direction="up" hspace="200">啦啦啦~~~我会往上跑了<br>啦啦啦~~~我会往上跑了</marquee>
<p>
<marquee direction="right">啦啦啦~~~我会往右跑了</marquee>
<p>
<marquee height="200" direction="down"><center>啦啦啦~~~我会往下跑了</center></marquee>
<p>
<marquee width="500" behavior="alternate">啦啦啦~~~我来回的跑</marquee>
<p>
<marquee behavior="slide">啦啦啦~~~我跑到目的地就该休息了</marquee>
<P>
<marquee scrollamount="2">啦啦啦~~~我累了，要慢慢的溜达</marquee>
<P>
<marquee scrolldelay="300">啦啦啦~~~我累了，我要走走停停</marquee>
<p>
<marquee scrollamount="20">哈哈~都没有我跑得快</marquee>
<p>
<marquee><img src="../../imge/6-2.jpg">啦啦啦~~图片也可以啊</marquee>
<p>
<marquee bgcolor="#FFFFCC" width="700" vspace="30"><font size="+3" color="#FF0000">啦啦啦~~滚动文字有背景了</font></marquee>
</center>
</body>
</html>
8-2 插入多媒体文件
在网页中可以用<embed>标签将多媒体文件插入，比如可以插入音乐和视频等。 用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、mp3、AIFF、AU格式等。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。但要说明一点，虽然我们用代码标签插入了多媒体文件，但IE浏览器通常能自动播放某些格式的声音与影像，但具体能播放什么样格式的文件．取决于所用计算机的类型以及浏览器的配置．浏览器使用Hn7或n7协议获取多媒体文件，(可能得花很长时间，因为多媒体文件通常比较大)，浏览器既就决定如何播放。通常是调用称为括件的内置程序来播放的。事实上．浏览器仅仅能显示几种文件格式。是括件扩展了浏览器的能力．有许多种不同的括件程序，每种都能赋予浏览器一种新的能力。有时，不得不分别下栽每个浏览器的多媒体插什程序．系统最小化的安装一般不包括声音与影像播放器。另外在播放影音文件时，若是使用一小部分窗口播放，大多数的计算机还比较快。若是全屏幕播放．就需要专用的硬件或是性能好的计算机．对于IE，若无预先安装好的插件程序，它会提示你或是打开文件或是保存文件或是取消下载。若打开未知类型的文件，浏览器会试图使用外部的应用程序显示此文件．但这要取决于操作系统的配置。
<embed>标签的使用格式：
<EMBED SRC="音乐文件地址">
常用属性如下：| SRC="FILENAME" | 设定音乐文件的路径 |
| AUTOSTART=TRUE/FALSE | 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE |
| LOOP=TRUE/FALSE | 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 |
| STARTIME="分:秒" | 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20 |
| VOLUME=0-100 | 设定音量的大小。如果没设定的话，就用系统的音量。 |
| WIDTH HEIGHT | 设定播放控件面板的大小 |
| HIDDEN=TRUE | 隐藏播放控件面板 |
| CONTROLS=CONSOLE/SMALLCONSOLE | 设定播放控件面板的样子 |
实例 h8-2-1.html
<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/一千零一夜.mid" height=150 width=400 loop="false">
</center>
</BODY>
</HTML>
实例 h8-2-2.html
<HTML>
<HEAD>
<TITLE>插入多媒体文件</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/mmm.avi" width="400" height="500" loop="false">
</center>
</BODY>
</HTML>
实例 h8-2-3.html
<HTML>
<HEAD>
<TITLE>插入flash</TITLE>
</HEAD>
<body>
<H2 ALIGN="CENTER">网页中的多媒体</H2>
<HR>
<center>
<embed src="../../imge/023.swf" height="500" width="550"><!--插入flash-->
<embed src="../../imge/023.swf" height="500" width="550" wmode="transparent"><!--插入透明flash-->
</center>
</BODY>
</HTML>
实例 h8-2-4.html
<html>
<head>
<title>在图片上插入透明flash</title>
</head>
<body bgColor=lightblue>
<br><center>在图片上插入透明Flash动画</center><br>
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolorlight="#00CC99" bordercolordark="#009933" background="../../imge/hai.jpg"><TBODY><TD><EMBED src="../../imge/016.swf" width=630 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed></TD></TBODY></table></center>
</body>
</html>
注意 长和宽的设定要根据图片的实际大小来设定
8-3 嵌入多媒体文件
除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，这种方式将不调用媒体播放器
8-3-1 嵌入背景音乐
<bgsound>标签用来设置网页的背景音乐。但只适用於 IE，其参数设定不多。格式如下：
<BGSOUND src="your.mid" autostart=true loop=infinite>
- src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。声音文件可以是wav,midi,mp3等类型的文件 - autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。 - loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。直到网页关闭为止。
实例 8-3-1.html
<HTML>
<HEAD>
<TITLE>背景声音</TITLE>
</HEAD>
<body>
<H4 ALIGN="CENTER" >网页的背景声音<H4>
<HR>
<bgsound src="../../imge/小三和弦.mp3" LOOP="3">
</BODY>
</HTML>
背景音乐可以放在<body></body>或<head></head>之间
8-3-2 在网页中嵌入视屏文件使用前面学过的标签<img src="路径">,在此就不重述了。
8-4 点播音乐
将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：
<A HREF="音乐地址">乐曲名</A>
例如：播放一段MIDI音乐：
<A HREF="imge/一千零一夜.mid">MIDI音乐</A> MIDI音乐
播放一段AU格式音乐：
<A HREF="imge/小三和弦.mp3">小三和弦-mp3音乐</A> 小三和弦-mp3音乐
把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！
基本语法
<marquee> ... </marquee>
<marquee>啦啦啦，我会移动耶！</marquee>啦啦啦，我会移动耶！
文字移动属性的设置
方向 <direction=#> #=left, right
<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P><marquee direction=right>啦啦啦，我从左向右移！</marquee>
啦啦啦，我从右向左移！
啦啦啦，我从左向右移！
方式 <bihavior=#> #=scroll, slide, alternate
<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P><marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>
啦啦啦，我一圈一圈绕着走！
啦啦啦，我只走一次就歇了！
啦啦啦，我来回走耶！
循环 <loop=#> #=次数；若未指定则循环不止(infinite)
<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee> <P><marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>
啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！
速度 <scrollamount=#>
<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>啦啦啦，我走得好快哟！
延时 <scrolldelay=#>
<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>啦啦啦，我走一步，停一停！
外观(Layout)设置
对齐方式(Align) <align=#> #=top, middle, bottom
<font size=6><marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。
啦啦啦，我会移动耶！
啦啦啦，我会移动耶！
啦啦啦，我会移动耶！
底色 <bgcolor=#>
#=rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>
啦啦啦，我会移动耶！
面积 <height=# width=#>
<marquee height=40 width=50% bgcolor=aaeeaa>啦啦啦，我会移动耶！
</marquee>
啦啦啦，我会移动耶！
空白(Margins)<hspace=# vspace=#>
********************************************<br>嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
********************************************
********************************************
嗨, 啦啦啦，我会移动耶！大家好！
********************************************
鼠标感应控制 <onMouse>
<marquee onMouseOut=this.start(); onMouseOver=this.stop();>鼠标放到上面我就停，移开我就走哦！</marquee>鼠标放到上面我就停，移开我就走哦！
类别：默认分类 | 添加到搜藏 | 浏览() 网友评论： 1 匿名网友 - 2006年12月10日 星期日 00:29 fdasdfaDASJ发射机·♀2000000000000000000000000000000000000000000000000000000000 2 怎么解释爱 - 2007年01月09日 星期二 05:13 http://tech.china.com/zh_cn/netschool/homepage/dreamweaver/develop/2005061501.html
也可以在这儿看 3 怎么解释爱 - 2007年01月09日 星期二 05:16 基本语法
<marquee>...</marquee>
移动属性的设置,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#>#=left,right,up,down<marqueedirection=left>从右向左移！</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈绕着走！</marquee>
<marqueebehavior=slide>只走一次就歇了！</marquee>
<marqueebehavior=alternate>来回走</marquee>
循环
<loop=#>#=次数；若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟！</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>
</font>
4 怎么解释爱 - 2007年01月09日 星期二 05:17 底色
<bgcolor=#>#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>颜色！</marquee>
面积
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面积！</marquee>
方向
<direction=#>#=left,right,up,down<marqueedirection=left>从右向左移！</marquee>
方式
<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>一圈一圈绕着走！</marquee>
<marqueebehavior=slide>只走一次就歇了！</marquee>
<marqueebehavior=alternate>来回走</marquee>
5 怎么解释爱 - 2007年01月09日 星期二 05:17 循环
<loop=#>#=次数；若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3趟</marquee><P>
<marqueeloop=3width=50%behavior=slide>只走3趟</marquee>
<marqueeloop=3width=50%behavior=alternate>只走3趟！</marquee>
速度
<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#>#=top,middle,bottom<fontsize=6>
<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#>#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marqueebgcolor=aaaaee>颜色！</marquee>
面积
<height=#width=#><marqueeheight=40width=50%bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=#vspace=#>
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>面积！</marquee>
相关阅读 更多 +
