给网页中的按钮和图片添加声音

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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月6日 上午11:55
下一篇 2018年2月7日 上午9:23

99%的人还看了以下文章

  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.1K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    4.3K1
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.2K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    3.2K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    4.6K0
  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    2.1K0

发表回复

登录后才能评论