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的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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和ACCESS写聊天室(七)
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python搭建微信公众平台
2016/02/09 Python
python实现简单socket通信的方法
2016/04/19 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
在django模板中实现超链接配置
2019/08/21 Python
Django 请求Request的具体使用方法
2019/11/11 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
外贸采购员岗位职责
2014/03/08 职场文书
行政管理专业求职信
2014/07/06 职场文书
付款委托书范本
2014/10/05 职场文书
2014年教研组工作总结
2014/11/26 职场文书
关于长城的导游词
2015/01/30 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android