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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
php Static关键字实用方法
2010/06/04 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
js中生成map对象的方法
2014/01/09 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python 的 Socket 编程
2015/03/24 Python
老生常谈Python基础之字符编码
2017/06/14 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
门卫人员岗位职责
2013/12/24 职场文书
品德评语大全
2014/05/05 职场文书
民政局未婚证明
2015/06/15 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
汉语拼音教学反思
2016/02/22 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL