在网页中,,除了可以添加文本和图像之外还可以插入动画声音视频等媒体元素,如滚动效果、 Flash、 Active x以及midi声音文件等
一、设置滚动效果
1、滚动标记marquee
1)简介:使用marquee标记不仅可以滚动文字,也可以移动图片表格等
2)语法:
<marquee>……</marquee>
2、滚动方向direction
滚动方向有4个取值:up,down,left,right
<marquee direction="方向">
3、滚动方式behaviour
1)、循环滚动默认效果:scroll
2)、只滚动一次就停止:slide
3)、来回交替进行滚动:alternate
<marquee behavior="方式">
4、滚动速度scrollamount
滚动的速度实际上是设置每次滚动时移动的长度以像素为单位
<marquee scrollamount="像素单位">
1-4演示:
1-4代码示例:
html"><marquee>how are you CSDN, have a good day~</marquee>
<p><marquee direction="down" scrolldelay="200">how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~how are you CSDN, have a good day~</marquee></p>
<marquee behavior="alternate">how are you CSDN, have a good day~</marquee>
<marquee scrollamount="3">how are you CSDN, have a good day~</marquee>
5、滚动延迟scrolldelay
设置滚动的时间间隔,单位是毫秒
6、滚动循环loop
默认情况下的滚动是无限循环,如果想设置滚动次数则用loop
7、滚动范围width、height
默认的情况下水平滚动的文字背景与文字同高与浏览器窗口同宽,宽度和高度参数可以调整其水平和垂直的范围
8、滚动背景颜色bgcolor
为了突出滚动某部分内容,可以使用bg color设置滚动背景颜色
9、空白空间hspace、vspace
默认情况下滚动对象周围的文字和图像是与滚动背景紧密连接的,使用空白空间可以设置他们之间的空白空间
5-9演示:
5-9代码示例:
html"><hr>
1、<marquee scrolldelay="200">how are you CSDN, ——这是滚动延迟_scrolldelay—— have a good day~</marquee>
2、<marquee scrollamount="50" loop="2">how are you CSDN, ——这是循环2次_loop—— have a good day~</marquee>
3、<marquee width="300" height="100" direction="up" bgcolor="#E197F0">how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~</marquee><br>
4、<marquee height="100" direction="up" bgcolor="#E197F0" hspace="50" vspace="50">how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~how are you CSDN, ——这是限定宽度和高度—— have a good day~</marquee>
二、插入多媒体文件
1、插入flash动画
Flash是一种动画技术,它可以实现一些较为复杂的动态效果
<embed src="小院灯光.swf" width="200"></embed>
兼容会出现左侧动画,不兼容出现右侧提示,
2、插入音频和视频文件
html"><embed src="落叶.mp3"width="200"></embed>
<embed src="QQ2025223-144356.mp4" width="200"></embed>
运行结果:
三、设置背景音乐
<bgsound src="落叶.mp3" loop="2"></bgsound>
tips:正常的代码应该如上,但是现在大多数浏览器已经不兼容了.
但是<embed标签的音乐不能循环播放,所以我们可以采取以下方法:在head中插入以下代码
<audio id="music" controls="controls" autoplay="autoplay" loop="loop">
<source src="落叶.mp3" type="audio/mpeg">
</audio>