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 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP中的替代语法介绍
2015/01/09 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
node后端服务保活的实现
2019/11/10 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python中的列表推导浅析
2014/04/26 Python
Python3基础之函数用法
2014/08/13 Python
Python面向对象类的继承实例详解
2018/06/27 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
大学生实习证明范本
2014/01/15 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
python微信智能AI机器人实现多种支付方式
2022/04/12 Python