Loud links-是一款大小只有1.5KB的WEB音效插件，可以实现网页中按钮与图片等元素的触发交互，比如鼠标放上去后出现响声，或者鼠标点击后出现响声。Loud links使用相当简单。
使用方法
1. 在网页中引入JS 文件
<script src="js/loudlinks.min.js"></script>
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 -->
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 为声音名称，声音文件必须存放到音频目录：/sounds/mp3/noise.mp3 或 /sounds/ogg/noise.ogg
Loud links 下载&演示：https://loudlinks.rocks/
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/1133.html
微信扫一扫 
支付宝扫一扫 