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旋转动画实例代码
Sep 11 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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基础知识:控制结构
2006/12/13 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
对python的文件内注释 help注释方法
2018/05/23 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
python绘制封闭多边形教程
2020/02/18 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
优秀教师先进事迹
2014/01/22 职场文书
企业指导教师评语
2014/04/28 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL