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实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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
深入array multisort排序原理的详解
2013/06/18 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
django中的数据库迁移的实现
2020/03/16 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
服装促销活动方案
2014/02/23 职场文书
企业文化口号
2014/06/12 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
javascript Number 与 Math对象的介绍
2021/11/17 Javascript