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 相关文章推荐
jquery attr方法获取input的checked属性问题
May 26 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
javascript删除数组元素的七个方法示例
Sep 09 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
论建造顺序的重要性
2020/03/04 星际争霸
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
php生成略缩图代码
2012/07/16 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python rsa 加密解密
2017/03/20 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python内置函数property()如何使用
2020/09/01 Python
python time()的实例用法
2020/11/03 Python
基于Python实现天天酷跑功能
2021/01/06 Python
性能服装:HYLETE
2018/08/14 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
市场营销方案范文
2014/03/11 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
《春雨》教学反思
2014/04/24 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
合同纠纷调解书
2015/05/20 职场文书
实验室安全管理制度
2015/08/05 职场文书
安全学习心得体会范文
2016/01/18 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书