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 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
js调用刷新界面的几种方式
May 03 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
javascript标准库(js的标准内置对象)总结
May 26 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python求导数的方法
2015/05/09 Python
Python中格式化format()方法详解
2017/04/01 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python实现简易学生信息管理系统
2020/04/05 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Django权限设置及验证方式
2020/05/13 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
煤矿班组长的职责
2013/12/25 职场文书
监理资料员岗位职责
2014/01/03 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
工厂车间标语
2014/06/19 职场文书
英语教学课后反思
2016/02/15 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python requests用法和django后台处理详解
2022/03/19 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis