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 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python安装本地whl的实例步骤
2019/10/12 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
党支部综合考察材料
2014/05/19 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
校运会新闻稿
2015/07/17 职场文书
分享python函数常见关键字
2022/04/26 Python