HTML5添加鼠标悬浮音响效果不使用FLASH


Posted in HTML / CSS onApril 23, 2014

使用HTML5+jQuery,不使用FLASH:

浏览器适用范围:Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+

代码示例:

复制代码
代码如下:

$("#speak").mouseenter(function(){
$("<audio></audio>").attr({
'src':'audio/'+Math.ceil(Math.random() * 5)+'.mp3',
'volume':0.4,
'autoplay':'autoplay'
}).appendTo("body");
});

上面是使用html5的audio元素,随机播放一个mp3音效。

该代码示范(使用了jQuery)来自goodfootapp.com首页。

HTML / CSS 相关文章推荐
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php empty函数 使用说明
2009/08/10 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JavaScript简介
2015/02/15 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python爬虫请求头设置代码
2020/07/28 Python
python定时截屏实现
2020/11/02 Python
班级体育活动总结
2014/07/05 职场文书
工程款申请报告
2015/05/15 职场文书
关于观后感的作文
2015/06/18 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript