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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
使用CSS实现音波加载效果
May 07 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中Session的概念
2006/10/09 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
js post提交调用方法
2014/02/12 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
深入理解vue Render函数
2017/07/19 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
Python对数据库操作
2016/03/28 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
公司新员工的演讲稿注意事项
2014/01/01 职场文书
应届生自荐书
2014/06/23 职场文书
民事授权委托书范文
2014/08/02 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS