您当前位置:站长素材 >>资讯>>jquery资讯>>给网站增加交互音效 – Loud links轻量插件

UI资讯 字体资讯 jquery资讯 PSD资讯 技术资讯 酷站资讯 主题资讯 模板资讯 logo资讯 图标资讯 矢量资讯 壁纸资讯

给网站增加交互音效 – Loud links轻量插件

标签:轻量插件Loud links交互音效

玩手机游戏时,会发现里面的每个按钮只要点击一下就会发出声响。这是一个很不错的效果,但是如果想在网页上实现这种交互声音,可以用我们今天分享的插件 Lound links JS 插件。

Loud links这个WEB音效插件可以实现按钮与图片等元素的触发交互,比如鼠标 HOVER 后出现响声,或者鼠标点击后出现响声。本插件非常轻量级,官方介绍只有1.5KB大小,使用也相当简单。


JS插件:Loud links
下载&演示:https://loudlinks.rocks/
支持音频格式:mp3, ogg

达人体验了一下,使用这种方法还是不错的,从心理学角度来看,加入声音的交互,可以增加一点小小的惊喜。

关于 BUG,其实也不算 BUG,就是第一次使用的时候,声音会有延迟,这是因为第一次使用时需要下载声音文件,所以不建议使用大文件。


使用方法

STEP 1. 嵌入JS 文件

...
<script src="js/loudlinks.min.js"></script>
</body>
</html>

STEP 2. 在需要触发的元素上加入对应 class 。

  • 「loud-link-hover」为悬停触发声音;
  • 「loud-link-click」为点击触发声音。

代码参考如下:

<div class=“loud-link-hover”> ... </div> <!-- sound on hover -->
<div class=“loud-link-click”> ... </div> <!-- sound on click -->

STEP 3. 使用「data-sound」来配置声音

方式一:绝对路径

<div class=“loud-link-hover” data-sound="http://example.com/audio/noise.{{type}}"> ... </div> //{{type}}为声音格式,比如 .mp3, .ogg

方式二:使用声音名称

<div class=“loud-link-hover” data-sound="noise"> ... </div>//这里 noise 为声音
来源:设计达人

                        
可匿名发表评论
0条评论
关于站长之家 - 联系我们(电话) - 广告服务 - 版权声明 - 友情链接 - 栏目地图 - 帮助说明

© CopyRight 2002-2018, CHINAZ.COM, Inc.All Rights Reserved.