Teilen Sie ein Beispiel für die Verwendung von JavaScript zum Erstellen eines WeChat-Musikalbums-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Teilen Sie ein Beispiel für die Verwendung von JavaScript zum Erstellen eines WeChat-Musikalbums

巴扎黑

Aug 15, 2017 am 10:21 AM

javascript js 音乐

In diesem Artikel wird hauptsächlich das WeChat-Musikalbum-Fall des js-WeChat-Anwendungsszenarios beschrieben, das einen gewissen Referenzwert hat.

Diese Demo ist nur ein js-WeChat-Musikalbum Im Einzelfall müssen die Einzelheiten je nach Situation durchgeführt werden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css" rel="external nofollow" >
  <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
  <style>
    html,body{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    html{
      font-size:100px;/*设计稿640*960*/
    }
    .main,.swiper-container,.swiper-slide{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    .page1{
      position:relative;
      background:url("../img/swiper/bg1.jpg") no-repeat;
      background-size:cover;
    }
    .page1 img{
      position:absolute;  
      opacity:0;    
    }
    .page1 img:nth-child(1){
      left:2rem;
      top:.28rem;
      width:.96rem;
      height:2.32rem;  
        
    }
    .page1 img:nth-child(2){
      right:0;
      top:.28rem;
      width:3.7rem;
      height:6rem;      
    }
    .page1 img:nth-child(3){
      left:.5rem;
      bottom:.8rem;
      width:5.5rem;
      height:5.12rem;      
    }
    .page1 img:nth-child(4){
      left:-1.6rem;
      bottom:0;
      width:7.86rem;
      height:5.88rem;      
    }
    /*实现切换完成后页面中的元素在开始运动的思想:开始的时候当前的这个区域没有对应的ID，当切换到这个区域的时候，我们为其增加ID，在css中我们把所有的动画效果都放在指定的ID下，这样的话只需要让区域有ID，里面的子元素就有动画了*/
    #page1 img:nth-child(1){
      /*注意移动端的样式写两套 并且不加webkit的在后*/
      -webkit-animation:bounceInLeft 1s linear 0s 1 both;
      animation:bounceInLeft 1s linear 0s 1 both;  
    }
    #page1 img:nth-child(2){
      /*注意移动端的样式写两套 并且不加webkit的在后*/
      -webkit-animation:bounceInRight 1s linear .3s 1 both;
      animation:bounceInRight 1s linear .3s 1 both;  
    }
    #page1 img:nth-child(3){
      /*注意移动端的样式写两套 并且不加webkit的在后*/
      -webkit-animation:bounceInUp 1s linear .6s 1 both;
      animation:bounceInUp 1s linear .6s 1 both;  
    }
    #page1 img:nth-child(4){
      /*注意移动端的样式写两套 并且不加webkit的在后*/
      -webkit-animation:bounceInUp 1s linear .9s 1 both;
      animation:bounceInUp 1s linear .9s 1 both;  
    }
    .page2{
      position:relative;
      background:url("../img/swiper/bg2.jpg") no-repeat;
      background-size:cover;
    }
    .page2 img{
      position:absolute;
      top:2.5rem;
      opacity:0;
    }
    .page2 img:nth-child(1){
      top:0;
      left:0;
      width:3.4rem;
      height:1.74rem;
    }
    .page2 img:nth-child(2){
      left:1.48rem;
    }
    .page2 img:nth-child(3){
      left:3.2rem;
    }
    .page2 img:nth-child(4){
      left:4.7rem;
    }
    
    #page2 img:nth-child(1){
      -webkit-animation:bounceInLeft 1s linear 0s 1 both;
      animation:bounceInLeft 1s linear 0s 1 both;  
    }
    #page2 img:nth-child(2){
      -webkit-animation:zoomIn 1s linear .3s 1 both;
      animation:zoomIn 1s linear .3s 1 both;  
    }
    #page2 img:nth-child(3){
      -webkit-animation:zoomIn 1s linear .6s 1 both;
      animation:zoomIn 1s linear .6s 1 both;  
    }
    #page2 img:nth-child(4){
      -webkit-animation:zoomIn 1s linear .9s 1 both;
      animation:zoomIn 1s linear .9s 1 both;  
    }

    .arrow{
      position:absolute;
      left:50%;
      bottom:.2rem;
      z-index:10;
      margin-left:-.24rem;
      width:.48rem;
      height:.36rem;
      background:url("../img/swiper/web-swipe-tip.png") no-repeat;
      background-size:100% 100%;
      
      -webkit-animation:bounce 1s linear 0s infinite both;
      animation:bounce 1s linear 0s infinite both;
    }

    .music{
      display:none;
      position:absolute;
      top:.2rem;
      right:.2rem;
      z-index:10;
      width:.6rem;
      height:.6rem;
      background:url("../audio/music.svg") no-repeat;
      background-size:100% 100%;
    }
    .music.move{
      -webkit-animation :musicMove 1s linear 0s infinite both;
      animation :musicMove 1s linear 0s infinite both;
    }
    .music audio{
      display:none;
    }
    @-webkit-keyframes musicMove{
      0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
      }
      100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
      }
    }
    @keyframes musicMove{
      0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
      }
      100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <section class=&#39;main&#39;>
    <!--MUSIC-->
    <p class=&#39;music&#39; id=&#39;musicMenu&#39;>
      <audio src="beyond.mp3" preload = &#39;none&#39; loop autoplay></audio id=&#39;musicAudio&#39;>
      <!-- <audio>
        <source src=&#39;beyond.mp3&#39; type=&#39;audio/mpeg&#39;/>
        <source src=&#39;beyond.wav&#39; type=&#39;audio/wav&#39;/>
        <source src=&#39;beyond.ogg&#39; type=&#39;audio/ogg&#39;/>
      </audio> -->
    </p>
    <!--CONTAINER-->
    <p class=&#39;swiper-container&#39;>
      <p class=&#39;swiper-wrapper&#39;>
        <p class=&#39;swiper-slide page1&#39;>
          <img src="img/swiper/page1-text1.png" alt="">
          <img src="img/swiper/page1-text2.png" alt="">
          <img src="img/swiper/page1-text3.png" alt="">
          <img src="img/swiper/page1-text4.png" alt="">
        </p>
        <p class=&#39;swiper-slide page2&#39;>
          <img src="img/swiper/page2-text1.png" alt="">
          <img src="img/swiper/page2-text2.png" alt="">
          <img src="img/swiper/page2-text3.png" alt="">
          <img src="img/swiper/page2-text4.png" alt="">
        </p>
      </p>
    </p>
    <!--ARROW-->
    <p class=&#39;arrow&#39;></p>

    
  </section>
  <script charset=&#39;utf-8&#39; src=&#39;swiper.min.js&#39;></script>
  <script>
    //rem
    ~function(){
      var desW = 640,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW,
        oMain = document.querySelector(".main");
      if(winW>desW){
        oMain.style.margin = "0 auto";
        oMain.style.width = desW + &#39;px&#39;;
        return;
      }
      document.documentElement.style.fontSize = ratio*100+"px";

    }()
    new Swiper(&#39;.swiper-container&#39;,{
      direction:"vertical",
      loop:true,
      /*当切换结束后，给当前展示的区域添加对应的ID，由此实现对应的动画效果*/
      onSlideChangeEnd:function(swiper){
        var slideAry = swiper.slides;//获取当前一共有多少个活动快（包含loop模式前后多加的两个）
        var curIn = swiper.activeIndex;//当前展示的这个区域的索引
        var total = slideAry.length;
        //计算ID是PAGE?
        var targetId = &#39;page&#39;;
        switch(curIn){
          case 0:
            targetId += total - 2;
            break;
          case total - 1:
            targetId += 1;
            break;
          default:
            targetId += curIn
        }

        //给当前的活动块设置ID即可,还要把其余的移除
        [].forEach.call(slideAry,function(item,index){
          if(curIn === index){
            item.id = targetId;
            return;
          }
          item.id = null;
        })
        slideAry[curIn].id = targetId;

        //最后把animate.css里面的动画to里面添加opacity:1
      }
    })

    //MUSIC
    ~function(){
      var musicMenu = document.getElementById(&#39;musicMenu&#39;),
        musicAudio = document.getElementById(&#39;musicAudio&#39;);

      musicMenu.addEventListener(&#39;click&#39;,function(){
        if(musicAudio.paused){
          musicAudio.play();
          musicMenu.className = "music move";
          return;
        }
        musicAudio.pause();
        musicMenu.className = "music";

      })
      function controlMusic(){
        musicAudio.volume = 0.1;
        musicAudio.play();
        musicAudio.addEventListener(&#39;canplay&#39;,function(){
          musicMenu.style.display = "block";
          musicMenu.className = "music move";
        })
      }
      window.setTimeout(controlMusic,1000)
    }()
  </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel für die Verwendung von JavaScript zum Erstellen eines WeChat-Musikalbums. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7706

Java-Tutorial

1640

CakePHP-Tutorial

1394

Laravel-Tutorial

1288

PHP-Tutorial

1231

Related knowledge

Einführungserlebnis der Bose Soundbar Ultra: Heimkino direkt nach dem Auspacken? Feb 06, 2024 pm 05:30 PM

Solange ich mich erinnern kann, habe ich zu Hause ein Paar große Standlautsprecher gehabt. Ich bin der Meinung gewesen, dass ein Fernseher nur dann als Fernseher bezeichnet werden kann, wenn er mit einem kompletten Soundsystem ausgestattet ist. Aber als ich anfing zu arbeiten, konnte ich mir professionelles Home-Audio nicht leisten. Nachdem ich mich erkundigt und die Produktpositionierung verstanden hatte, stellte ich fest, dass die Soundbar-Kategorie für mich sehr gut geeignet ist. Sie erfüllt meine Bedürfnisse in Bezug auf Klangqualität, Größe und Preis. Deshalb habe ich mich für die Soundbar entschieden. Nach sorgfältiger Auswahl habe ich mich für dieses Panorama-Soundbar-Produkt entschieden, das Anfang 2024 von Bose auf den Markt gebracht wurde: den Bose Home-Entertainment-Lautsprecher Ultra. (Fotoquelle: Fotografiert von Lei Technology) Wenn wir den „originalen“ Dolby Atmos-Effekt erleben wollen, müssen wir im Allgemeinen eine gemessene und kalibrierte Surround-Sound-Decke zu Hause installieren.

Audacity verfügt jetzt über KI-Audiobearbeitungsfunktionen mit dem Intel OpenVINO-Plug-in Feb 15, 2024 am 11:06 AM

Audacity ist eine kostenlose und plattformübergreifende Open-Source-Audiobearbeitungssoftware. Es verfügt über einen offenen Code- und Plug-in-Beitragsmechanismus und jeder kann teilnehmen. Darüber hinaus bietet Intel einen kostenlosen Satz OpenVINOAI-Plug-Ins für Musikredakteure und Podcast-Produzenten an. Diese Website hat festgestellt, dass das Plug-in-Paket etwa 2 GB groß ist und auf der GitHub-Seite von Intel heruntergeladen werden kann. Für die Ausführung ist außerdem die 64-Bit-Windows-Version von Audacity erforderlich. Das Intuitivste an diesem KI-Plug-in ist, dass es drei erweiterte Tools zur Musikbearbeitungsfunktion von Audacity hinzufügt: Das erste ist die Funktion „Musikgenerierung“. Benutzer können Text verwenden, um die gewünschte Musik zu beschreiben, und die KI generiert Musik Clips innerhalb von 60 Sekunden, um Werbung und Filmmusik zu ermöglichen

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

Auswahl des richtigen Tablets für Musikstudenten Jan 10, 2024 pm 10:09 PM

Welches Tablet eignet sich für Musiker? Der 12,9-Zoll-Lautsprecher im iPad von Huawei ist ein sehr gutes Produkt. Es verfügt über vier Lautsprecher und die Klangqualität ist ausgezeichnet. Darüber hinaus gehört es zur Pro-Serie, die etwas besser ist als andere Modelle. Insgesamt ist das iPad Pro ein sehr gutes Produkt. Der Lautsprecher dieses Mini4-Mobiltelefons ist klein und die Wirkung ist durchschnittlich. Eine externe Musikwiedergabe ist damit nicht möglich, für den Musikgenuss ist man dennoch auf Kopfhörer angewiesen. Kopfhörer mit guter Klangqualität haben eine etwas bessere Wirkung, aber billige Kopfhörer im Wert von dreißig oder vierzig Yuan können die Anforderungen nicht erfüllen. Welches Tablet sollte ich für elektronische Klaviermusik verwenden? Wenn Sie ein iPad größer als 10 Zoll kaufen möchten, empfehle ich die Verwendung von zwei Anwendungen, nämlich Henle und Piascore. Zur Verfügung gestellt von Henle

So fügen Sie lokale Musik zu Limonadenmusik hinzu Feb 23, 2024 pm 07:13 PM

Wie füge ich lokale Musik zu Soda Music hinzu? Sie können Ihre lokale Lieblingsmusik zur Soda Music APP hinzufügen, aber die meisten Freunde wissen nicht, wie man lokale Musik zu Soda Music hinzufügt Der Herausgeber, interessierte Nutzer kommen vorbei! Anleitung zur Verwendung von Soda-Musik. So fügen Sie lokale Musik zu Soda-Musik hinzu und klicken Sie auf den Funktionsbereich [Musik] unten auf der Hauptseite das Symbol [drei Punkte] in der unteren rechten Ecke; 3. Erweitern Sie abschließend die Funktionsleiste unten und wählen Sie die Schaltfläche [Herunterladen], um es zur lokalen Musik hinzuzufügen.

Detaillierte Schritte zum Ansehen Ihrer Lieblingsmusik auf Douyin Mar 26, 2024 pm 06:20 PM

1. Klicken Sie auf [+]. 2. Klicken Sie oben auf [Musik auswählen]. 3. Klicken Sie auf [Meine Favoriten]. Methode 2: 1. Öffnen Sie Douyin und klicken Sie auf [Ich]. 2. Klicken Sie neben dem Avatar auf [Sammeln]. 3. Klicken Sie auf [Musik]

So spielen Sie Musik auf WeChat ab Feb 23, 2024 pm 09:28 PM

Wie spiele ich Musik auf WeChat ab? Sie können Ihre Lieblingsmusik auf der WeChat-App abspielen, aber die meisten Freunde wissen nicht, wie sie ihre Lieblingsmusik auf WeChat abspielen sollen. Als nächstes folgt das grafische Tutorial zum Abspielen von Musik auf WeChat. Interessierte User kommen vorbei und schauen vorbei! Tutorial zur WeChat-Nutzung: So spielen Sie Musik auf WeChat ab 1. Öffnen Sie zuerst die WeChat-APP, wischen Sie von oben nach unten, um die Miniprogrammseite aufzurufen. 2. Klicken Sie dann auf [Musik], wie im Bild unten gezeigt Geben Sie in der unten gezeigten Benutzeroberfläche das Suchfeld ein. Geben Sie Ihren Lieblingsliedtitel ein. 4. Wählen Sie abschließend den entsprechenden Liedtitel aus und klicken Sie, um das Lied abzuspielen.

Die Beziehung zwischen js und vue Mar 11, 2024 pm 05:21 PM

Die Beziehung zwischen js und vue: 1. JS als Eckpfeiler der Webentwicklung; 2. Der Aufstieg von Vue.js als Front-End-Framework; 3. Die komplementäre Beziehung zwischen JS und Vue; Vue.

See all articles