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

更新时间：2015年08月31日 12:01:41 投稿：mrr

本文给大家介绍jquery鼠标滑过点击事件音效试听，使用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>

您可能感兴趣的文章:

jquery对标签添加只读（readonly）或者禁用（disabled）属性
这篇文章主要介绍了jquery对标签添加只读（readonly）或者禁用（disabled）属性，jQuery是一个JavaScript库。极大地简化了JavaScript编程，下面关于其详细介绍，需要的小伙伴可以参考一下
2022-03-03
StringTemplate遇见jQuery冲突的解决方法
最近在做一个流程引擎，现着手于自定义模板的处理。设计在模板中所有的数据都将与字段对应，采用xml结构序列化作为流程持久化机制。
2011-09-09
jQuery 全选效果实现代码
利用jquery实现的全选效果代码，实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。
2009-03-03
jQuery根据name属性进行查找的用法分析
这篇文章主要介绍了jQuery根据name属性进行查找的用法,结合实例形式分析了jQuery各种常见name属性获取元素的相关实现技巧,需要的朋友可以参考下
2016-06-06
浅谈Jquery中Ajax异步请求中的async参数的作用
下面小编就为大家带来一篇浅谈Jquery中Ajax异步请求中的async参数的作用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
基于twbsPagination.js分页插件使用心得(分享)
下面小编就为大家带来一篇基于twbsPagination.js分页插件使用心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
jquery实现左右无缝轮播图
这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
文本框文本自动补全效果示例分享
这篇文章主要介绍了jquery实现文本框的文本自动补全效果,大家参考使用吧
2014-01-01
jquery 获取标签名(tagName)示例代码
如果是需要取到tagName后再进行判断，那么下面的代码或许对大家有所帮助，感兴趣的朋友不妨尝试一下哈
2013-07-07
Django中使用jquery的ajax进行数据交互的实例代码
这篇文章主要介绍了Django中使用jquery的ajax进行数据交互的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
2017-10-10