JavaScript实现音乐导航效果


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了JavaScript实现音乐导航效果的具体代码,供大家参考,具体内容如下

效果展示

JavaScript实现音乐导航效果

鼠标在导航栏上移动,每一项发出一种音符(do re mi fa so la xi),同样键盘上的1-7数字也可以有同样的效果。

资源下载

音乐导航(缓动动画、会唱歌的导航)

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>音乐导航</title>
 <style>
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
 }
 #nav {
  width: 706px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
 }
 #nav ul {
  width: 710px;
 }
 #nav ul li {
  float: left;
  width: 100px;
  text-align: center;
  line-height: 40px;
  border-right: 1px dashed #ccc;
  position: relative;
 }
 #nav ul li a { /* a 标签填充整个 li */
  width: 100%;
  height: 100%;
  display: inline-block;
 }
 a {
  text-decoration: none;
  color: #000000;
 }
 span {
  width: 100px;
  height: 40px;
  background: skyblue;
  position: absolute;
  left: 0;
  top: 40px;
  z-index: -1;
 }
 </style>
</head>
<body>
 <nav id="nav">
 <ul id="ul">
  <li><a href="">千千音乐</a><span></span><audio src=" source/a1.mp3"></audio></li>
  <li><a href="">echo回声</a><span></span><audio src=" source/a2.mp3"></audio></li>
  <li><a href="">酷狗音乐</a><span></span><audio src=" source/a3.mp3"></audio></li>
  <li><a href="">QQ音乐</a><span></span><audio src=" source/a4.mp3"></audio></li>
  <li><a href="">酷我音乐</a><span></span><audio src=" source/a5.mp3"></audio></li>
  <li><a href="">网易云音乐</a><span></span><audio src=" source/a6.mp3"></audio></li>
  <li><a href="">虾米音乐</a><span></span><audio src=" source/a7.mp3"></audio></li>
 </ul>
 </nav>
<script src="js/myFunc.js"></script>
<script>
 window.onload = function () {
 // 1.获取标签
 var ul = $("ul");
 var allLis = ul.children;

 // 2.监听鼠标进入 li 标签
 for(var i=0; i<allLis.length; i++){
  allLis[i].onmouseover = function () {
  // 2.1 缓动动画
  buffer(this.children[1], {"top": 0});

  // 2.2 播放音符
  this.children[2].play();
  this.children[2].currentTime = 0;
  };

  // 2.3 监听鼠标离开
  allLis[i].onmouseout = function () {
  buffer(this.children[1], {"top": 40});
  };

  // 3.监听键盘的点击(1-7分别代表 do re mi fa so la xi)
  document.onkeydown = function (event) {
  var e = event || window.event;
  // console.log(e.keyCode);

  var keyCode = e.keyCode -49;
  buffer(allLis[keyCode].children[1], {"top": 0}, function () {
   buffer(allLis[keyCode].children[1], {"top": 40})
  })

  // 2.2 播放音符
  allLis[keyCode].children[2].play();
  allLis[keyCode].children[2].currentTime = 0;
  }
 }
 }
</script>
</body>
</html>

js/myFunc.js

function $(id) {
 return typeof id === "string" ? document.getElementById(id) : null;
}

/**
 * 缓动动画函数
 * @param obj
 * @param json
 * @param fn
 */
function buffer(obj, json, fn) {
 // 1.1 清除定时器
 clearInterval(obj.timer);

 // 1.3 设置定时器
 var begin = 0, target = 0, speed = 0;
 obj.timer = setInterval(function () {
 // 1.3.0 标记
 var flag = true;
 for(var k in json){
  // 1.3.1 求出初始值
  if("opacity" === k){ // 透明度
  console.log(getCssStyleAttr(obj, k));
  begin = Math.round(parseFloat(getCssStyleAttr(obj, k)) * 100) || 100; // 获取 CSS 样式值
  target = parseInt(json[k] * 100);
  }else if("scrollTop" === k){
  begin = Math.ceil(obj.scrollTop);
  target = parseInt(json[k]);
  }else { // 其他情况
  begin = parseInt(getCssStyleAttr(obj, k)) || 0; // 获取 CSS 样式值
  target = parseInt(json[k]);
  }
  // console.log(begin, target);

  // 1.4 求出步长
  // 缓动动画原理:盒子本身的位置 + 步长(不断变化的,由大变小)
  // 步长:begin = begin + (end - begin) * 缓动系数
  speed = (target - begin) * 0.2;

  // 1.6 判断是否向上取整
  speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

  // 1.5 移动起来
  if("opacity" === k){ // 透明度
  // w3c 的浏览器
  obj.style.opacity = (begin + speed) / 100;
  // ie
  obj.style.filter = "alpha(opacity=" + (begin + speed) +")";
  }else if("scrollTop" === k){
  obj.scrollTop = begin + speed;
  }else {
  obj.style[k] = begin + speed + "px";
  }


  // 1.7 判断
  if(begin !== target){
  flag = false;
  }
 }
 // 1.8 清除定时器
 if(flag){
  clearInterval(obj.timer);

  // 判断有没有回调函数
  if(fn){
  fn()
  }
 }
 }, 20)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
javascript中的面向对象
Mar 30 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JavaScript实现无限轮播效果
Nov 19 #Javascript
微信小程序实现分页加载效果
Nov 19 #Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
H5 js点击按钮复制文本到粘贴板
Nov 19 #Javascript
JS数据类型分类及常用判断方法
Nov 19 #Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 #Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
初学JavaScript第二章
2008/09/30 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python for和else语句趣谈
2019/07/02 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
django在开发中取消外键约束的实现
2020/05/20 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
python中entry用法讲解
2020/12/04 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年入党决心书
2015/02/05 职场文书
交通处罚决定书
2015/06/24 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
redis 查看所有的key方式
2021/05/07 Redis
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android