• 【转载】HTML之网页的动态、多媒体效果(八)



    第八章网页的动态、多媒体效果

        在网页的设计过程中,动态效果的插入,会使网页更加生动灵活、丰富多彩。

    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="http://www.cnblogs.com/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="http://www.cnblogs.com/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="http://www.cnblogs.com/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="http://www.cnblogs.com/imge/023.swf" height="500" width="550"><!--插入flash-->
    <embed src="http://www.cnblogs.com/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="http://www.cnblogs.com/imge/hai.jpg"><TBODY><TD><EMBED src="http://www.cnblogs.com/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="http://www.cnblogs.com/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音乐

      把我们喜欢的音乐收集起来,作成一个音乐库,随时都可以让自己和别人徜徉在音乐的海洋中,已经有人这样做了,你一定已经遇到很多,而且自己也可以试着去做了!

     

  • 相关阅读:
    Dask教程
    python程序—利用socket监控端口
    python程序—封装案例
    python程序—士兵出击
    Python三大神器:装饰器,迭代器,生成器
    python程序—名片管理系统
    python程序—系统检测
    python程序—用户登录
    (七)javac编译
    Unity系统消息广播
  • 原文地址:https://www.cnblogs.com/cuishao1985/p/1372626.html
Copyright © 2020-2023  润新知