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 相关文章推荐
使用javascript获取页面名称
Dec 23 Javascript
js实现简单计算器
Nov 22 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
使用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
dedecms模版制作使用方法
2007/04/03 PHP
PHP 函数语法介绍一
2009/06/14 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php模板原理讲解
2013/11/13 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
网络安全类面试题
2015/08/01 面试题
促销活动策划方案
2014/01/12 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014年学生工作总结
2014/11/20 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Python字典的基础操作
2021/11/01 Python