编程 Javascript

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

Posted in Javascript onAugust 31, 2015

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

效果图如下：

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>

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

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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