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封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
关于RxJS Subject的学习笔记
2018/12/05 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python调用摄像头的示例代码
2020/09/28 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
党支部对转正的意见
2015/06/02 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android