Heim > Web-Frontend > js-Tutorial > So verwenden Sie js, um einen Musiknavigationseffekt zu erzielen

So verwenden Sie js, um einen Musiknavigationseffekt zu erzielen

王林
Freigeben: 2020-04-23 09:27:09
nach vorne
2424 Leute haben es durchsucht

So verwenden Sie js, um einen Musiknavigationseffekt zu erzielen

Einführung in die Wissenspunkte in diesem Artikel:

1. audio.play() spielt Audio

2. audio.currentTime = 0 startet Abspielen von Anfang an

3. Stellen Sie die Werkzeugbibliothek vor

Der Vorgangseffekt ist wie folgt:

Nachdem die Maus eingegeben wurde, spielen Sie den Ton ab

So verwenden Sie js, um einen Musiknavigationseffekt zu erzielen

Code wie folgt:

<!DOCTYPE html>
<html>
<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(&#39;load&#39;, function (ev) {
   // 1. 获取需要的标签
   var ul = myTool.$(&#39;ul&#39;);
   var allLis = ul.children;

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

   // 2.1 鼠标进入
   allLis[i].addEventListener(&#39;mouseover&#39;, 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(&#39;mouseout&#39;, function () {
    // 2.4 缓动动画
    myTool.slowMoving(this.children[1], {"top": 40});
   });
  }

 });
</script>
</body>
</html>
Nach dem Login kopieren

Empfohlenes Tutorial: js-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js, um einen Musiknavigationseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage