jQuery實現(xiàn)鼠標滑過點擊事件音效試聽

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

本文給大家介紹jquery鼠標滑過點擊事件音效試聽，使用jquery插件實現(xiàn)的特效，感興趣的朋友一起來學(xué)習(xí)吧。

廢話不多說了，直接看效果圖吧。

效果圖如下：

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>

您可能感興趣的文章:

相關(guān)文章

jquery對標簽添加只讀（readonly）或者禁用（disabled）屬性
這篇文章主要介紹了jquery對標簽添加只讀（readonly）或者禁用（disabled）屬性，jQuery是一個JavaScript庫。極大地簡化了JavaScript編程，下面關(guān)于其詳細介紹，需要的小伙伴可以參考一下
2022-03-03
StringTemplate遇見jQuery沖突的解決方法
最近在做一個流程引擎，現(xiàn)著手于自定義模板的處理。設(shè)計在模板中所有的數(shù)據(jù)都將與字段對應(yīng)，采用xml結(jié)構(gòu)序列化作為流程持久化機制。
2011-09-09
jQuery 全選效果實現(xiàn)代碼
利用jquery實現(xiàn)的全選效果代碼，實際上我感覺直接用js好像更容易些。不過這樣對于jquery的操作可以更熟悉。
2009-03-03
jQuery根據(jù)name屬性進行查找的用法分析
這篇文章主要介紹了jQuery根據(jù)name屬性進行查找的用法,結(jié)合實例形式分析了jQuery各種常見name屬性獲取元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2016-06-06
淺談Jquery中Ajax異步請求中的async參數(shù)的作用
下面小編就為大家?guī)硪黄獪\談Jquery中Ajax異步請求中的async參數(shù)的作用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
基于twbsPagination.js分頁插件使用心得(分享)
下面小編就為大家?guī)硪黄趖wbsPagination.js分頁插件使用心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
jquery實現(xiàn)左右無縫輪播圖
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)左右無縫輪播圖的具體代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
文本框文本自動補全效果示例分享
這篇文章主要介紹了jquery實現(xiàn)文本框的文本自動補全效果,大家參考使用吧
2014-01-01
jquery 獲取標簽名(tagName)示例代碼
如果是需要取到tagName后再進行判斷，那么下面的代碼或許對大家有所幫助，感興趣的朋友不妨嘗試一下哈
2013-07-07
Django中使用jquery的ajax進行數(shù)據(jù)交互的實例代碼
這篇文章主要介紹了Django中使用jquery的ajax進行數(shù)據(jù)交互的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下
2017-10-10