JS实现音乐导航特效


Posted in Javascript onJanuary 06, 2020

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

知识点

1.audio.play() 播放音频
2.audio.currentTime = 0 从头开始播放
3.引入工具库工具库

运行效果<

鼠标进入后,播放音频

JS实现音乐导航特效

JS实现音乐导航特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{margin:0;padding: 0;list-style: none;border:0;}
  a{text-decoration: none;color: #000;}
  #nav{width: 900px;height: 40px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
  #nav ul{width: 910px;}
  #nav ul li{float: left;width: 100px;line-height: 40px;text-align: center;
   background: url("images/_r1_c1.png") no-repeat 0 0 ;border-right: 1px dashed #ccc;position: relative;}
  #nav ul li a{width: 100%;height: 100%;display: inline-block;}
  span{width: 100px;height: 40px;background-color: 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=" rel="external nofollow" source/a1.mp3"></audio></li>
   <li><a href="">新头条</a><span></span><audio src=" rel="external nofollow" source/a2.mp3"></audio></li>
   <li><a href="">电视剧</a><span></span><audio src=" rel="external nofollow" source/a3.mp3"></audio></li>
   <li><a href="">新电影</a><span></span><audio src=" rel="external nofollow" source/a4.mp3"></audio></li>
   <li><a href="">小游戏</a><span></span><audio src=" rel="external nofollow" source/a5.mp3"></audio></li>
   <li><a href="">小说汇</a><span></span><audio src=" rel="external nofollow" source/a6.mp3"></audio></li>
   <li><a href="">旅游假</a><span></span><audio src=" rel="external nofollow" source/a7.mp3"></audio></li>
   <li><a href="">正品购</a><span></span><audio src=" rel="external nofollow" source/a8.mp3"></audio></li>
   <li><a href="">今日团</a><span></span><audio src=" rel="external nofollow" source/a9.mp3"></audio></li>
  </ul>
 </nav>
<script src="../00MyTools/MyTools.js"></script>
<script>
 window.addEventListener('load', function (ev) {
   // 1. 获取需要的标签
   var ul = myTool.$('ul');
   var allLis = ul.children;

   // 2. 遍历
  for (var i = 0; i < allLis.length; i++) {
   allLis[i].style.backgroundPositionY = (i * -40) + 'px';

   // 2.1 鼠标进入
   allLis[i].addEventListener('mouseover', function () {
     // 2.2 缓动动画
     myTool.slowMoving(this.children[1], {"top": 0});
     // 2.3 播音乐
     this.children[2].play();
     this.children[2].currentTime = 0;
   });

   // 2.3 鼠标离开
   allLis[i].addEventListener('mouseout', function () {
    // 2.4 缓动动画
    myTool.slowMoving(this.children[1], {"top": 40});
   });
  }

 });
</script>
</body>
</html>

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

Javascript 相关文章推荐
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
使用vue实现一个电子签名组件的示例代码
Jan 06 #Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 #Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 #Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 #Javascript
详解jQuery中的prop()使用方法
Jan 05 #jQuery
vue 对axios get pust put delete封装的实例代码
Jan 05 #Javascript
JavaScript修改注册表实例代码
Jan 05 #Javascript
You might like
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript基本语法分析说明
2008/06/15 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
package.json配置文件构成详解
2019/08/27 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python 忽略warning的输出方法
2018/10/18 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
详解python中的数据类型和控制流
2019/08/08 Python
python Kmeans算法原理深入解析
2019/08/23 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
谈谈python垃圾回收机制
2020/09/27 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
大学生交通专业求职信
2014/09/01 职场文书
党在我心中演讲稿
2014/09/02 职场文书
社团招新宣传语
2015/07/13 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python