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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue-cli3跨域配置的简单方法
Sep 06 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
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
解决yum对python依赖版本问题
2019/07/05 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python输出pdf文档的实例
2020/02/13 Python
python3.5的包存放的具体路径
2020/08/16 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
如何高效率的查找一个月以内的数据
2012/04/15 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
《散步》教学反思
2014/03/02 职场文书
承诺书的格式范文
2014/03/28 职场文书
任命书范本大全
2014/06/06 职场文书
商务经理岗位职责
2014/07/30 职场文书
2014年社区工作总结
2014/11/18 职场文书
社区义诊通知
2015/04/24 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技