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对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
对Layer UI 模块化的用法详解
Sep 26 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
cmd下运行php脚本
2008/11/25 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
创业计划书模版
2014/02/05 职场文书
实习协议书范本
2014/04/22 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
爬山的活动方案
2014/08/16 职场文书
股东授权委托书
2014/10/15 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
办公室卫生管理制度
2015/08/04 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
SSM VUE Axios详解
2021/10/05 Vue.js
win7配置本地ftp服务器的图文教程
2022/08/05 Servers