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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
演讲稿格式范文
2014/05/19 职场文书
建筑投标担保书
2014/05/20 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
创先争优宣传标语
2014/10/08 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
写给领导的感谢信
2015/01/22 职场文书
项目合作意向书
2015/05/08 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
nginx配置虚拟主机的详细步骤
2021/07/21 Servers