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

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%的人还看了以下文章

  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    网页制作 2020年2月23日
    1.7K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    2.7K0
  • CSS制作上一页 下一页 页码显示样式

    今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title> <style…

    2018年7月29日
    4.3K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    4.7K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    1.7K0
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    9.3K0

发表回复

登录后才能评论