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 相关文章推荐
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
js仿微信抢红包功能
Sep 25 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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安装为Apache DSO
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/11/17 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
分享PHP守护进程类
2015/12/30 PHP
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Django重设Admin密码过程解析
2020/02/10 Python
python如何运行js语句
2020/09/09 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
工程质量承诺书范文
2014/03/27 职场文书
六五普法学习心得体会
2016/01/21 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android