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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
vue实现登录拦截
Jun 29 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP加密解密实例分析
2015/12/25 PHP
JS类的封装及实现代码
2009/12/02 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
Python3.x对JSON的一些操作示例
2017/09/01 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python如何将模块打包并发布
2020/08/30 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
就业协议书的作用
2014/04/11 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
前台岗位职责
2015/02/13 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
创业计划书之面包店
2019/09/12 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL