html5 带声音的导航

代码实例:

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html  xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />    <title>无标题文档</title>    <style>        *{ margin:0; padding:0;}        #ul1{ width:1000px; height:30px;}        #ul1 li{            list-style:none;            width:100px;            height:30px;            background: #cccccc;            color:white; border:1px #000 solid;            float:left;            line-height:30px;            text-align:center;        }    </style>    <script>

window.onload = function(){            var aLi = document.getElementsByTagName(‘li‘);            var oA = document.getElementById(‘a1‘);            for(var  i=0;i<aLi.length;i++){                aLi[i].onmouseover= function(){                    //this.getAttribute(‘au‘);                    //字符串拼接的方式,获取不同的地址                    oA.src = this.getAttribute(‘au‘)+‘.mp3‘;                    //播放                    oA.play();                };            }        };    </script></head><body><ul id="ul1">    <li au="A" background="blue" >首页</li>    <li au="B">视频</li>    <li au="C">课程</li>    <li au="D">职业</li>    <li au="E">企业</li>    <li au="F">社区</li>    <li au="G">会员</li></ul><audio id="a1"></audio></body></html>

效果:

编辑的文件

2017-09-03 20:44:37

时间: 2024-10-21 23:27:53

html5 带声音的导航的相关文章

HTML5音频与视频实例(带声音的导航、视频与canvas结合、自制播放器)

实例1:带声音的导航 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="C

带弹性的导航栏

妙味的官网和智能社的官网上,会看到一个带弹性的导航栏,这个导航栏的效果非常流畅,其实这个效果并不难实现,说一下思路:正常的导航栏布局,只是在第一个li前加一个div,设置定位为绝对定位,并给div设置背景,设置其z-index值为1,设置li的z-index值为2,设置其父元素ul为相对定位,li设置成相对定位,li如果不设置成相对定位,会出现z-index失效的麻烦,然后用js调节背景的位置,当然了,还需要引入写好的弹性运动框架,弹性运动框架需要注意的问题是,检测终止条件,和终止之后直接将di

Python+opencv+pyaudio实现带声音屏幕录制

原文链接:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 Python+opencv+pyaudio实现带声音屏幕录制原创luke-skyworker 发布于2018-11-28 23:05:23 阅读数 3463 收藏展开文章目录声音录制视频录制(无声音)录制的音频与视频合成为带声音的视频 基于个人的爱好和现实的需求,决定用Python做一个屏幕录制的脚本.因为要看一些加密的视频,每次都要登录,特别麻烦,遂决定用自己写的脚本

导航 - 利用系统自带的App导航

导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewController.h" #import <MapKit/MapKit.h> #import "MBProgressHUD+MJ.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIText

html5带字幕的播放器

<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script></head><body> <style type="text/css">video{ width: 500

【HTML5 1】39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<v

39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.假设你须要一个迅速了解HTML基础的速成课程,那这就是你须要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<v

【转帖】39个让你受益的HTML5教程

39个让你受益的HTML5教程          闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成课程,那这就是你需要的.我将介绍新的语义标签(markups

【转】39个让你受益的HTML5教程

闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!)  By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成课程,那这就是你需要的.我将介绍新的语义标签(markups). 使用canvas进行绘制和动画.视频(<vi