jQuery实现鼠标滑过点击事件音效试听


Posted in Javascript onAugust 31, 2015

废话不多说了,直接看效果图吧。

效果图如下:

jQuery实现鼠标滑过点击事件音效试听

html代码:

<div class="wrapper">
     <h1 class="sub-section__title">eventType : </h1>
     <div class="center" style="margin-top: 40px;">
      <div id="trigger-2-hover" class="sound-trigger sound-trigger--type-default-2 sound-trigger--type-hover">
       <p class="sound-trigger__speach">HOVER!</p>
       <div class="sound-trigger__inner">
        <i class="fa fa-volume-up fa-lg"></i>
       </div>
      </div>
      <div id="trigger-2-click" class="sound-trigger sound-trigger--type-default sound-trigger--type-click">
       <p class="sound-trigger__speach">CLICK!</p>
       <div class="sound-trigger__inner">
        <i class="fa fa-volume-up fa-lg"></i>
       </div>
      </div>
     </div>
Javascript 相关文章推荐
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
React组件refs的使用详解
Feb 09 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
You might like
PHP整合PayPal支付
2015/06/11 PHP
Smarty变量用法详解
2016/05/11 PHP
微信自定义分享php代码分析
2016/11/24 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
Python json模块使用实例
2015/04/11 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
简单了解Python write writelines区别
2020/02/27 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
华为慧通笔试题
2016/04/22 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
日语系毕业生推荐信
2013/11/11 职场文书
便利店的创业计划书
2014/01/15 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
商业计划书格式、范文
2019/03/21 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Python办公自动化之Excel(中)
2021/05/24 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
python turtle绘图命令及案例
2021/11/23 Python