Partagez un exemple d'utilisation de JavaScript pour créer un album de musique WeChat-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Partagez un exemple d'utilisation de JavaScript pour créer un album de musique WeChat

巴扎黑

Aug 15, 2017 am 10:21 AM

javascript js 音乐

Cet article partage principalement le cas de l'album de musique WeChat du scénario d'application js WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cette démo n'est qu'un album de musique js WeChat L'idée générale de le cas, les détails doivent être effectués en fonction de la situation

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

4 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

3 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

4 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

1 Il y a quelques mois By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7706

Tutoriel Java

1640

Tutoriel CakePHP

1394

Tutoriel Laravel

1288

Tutoriel PHP

1231

Afficher plus

Related knowledge

Expérience de lancement de la Bose Soundbar Ultra : le cinéma maison dès la sortie de la boîte ? Feb 06, 2024 pm 05:30 PM

D'aussi loin que je me souvienne, j'ai eu une paire de grandes enceintes sur pied chez moi. J'ai toujours pensé qu'un téléviseur ne pouvait être appelé téléviseur que s'il était équipé d'un système audio complet. Mais lorsque j’ai commencé à travailler, je ne pouvais pas me permettre un son professionnel à domicile. Après m'être renseigné et compris le positionnement du produit, j'ai trouvé que la catégorie barre de son me convient très bien. Elle répond à mes besoins en termes de qualité sonore, de taille et de prix. J’ai donc décidé d’opter pour la barre de son. Après une sélection minutieuse, j'ai sélectionné ce produit de barre de son panoramique lancé par Bose début 2024 : l'enceinte de divertissement à domicile Bose Ultra. (Source photo : photographié par Lei Technology) De manière générale, si nous voulons expérimenter l'effet Dolby Atmos « original », nous devons installer chez nous un son surround + plafond mesuré et calibré.

Audacity bénéficie désormais de capacités d'édition audio IA avec le plug-in Intel OpenVINO Feb 15, 2024 am 11:06 AM

Audacity est un logiciel d'édition audio multiplateforme gratuit et open source. Il dispose d'un code ouvert et d'un mécanisme de contribution de plug-in, et tout le monde peut y participer. De plus, Intel propose un ensemble gratuit de plug-ins OpenVINOAI conçus pour les éditeurs de musique et les producteurs de podcasts. Ce site Web a remarqué que le package de plug-ins fait environ 2 Go et peut être téléchargé sur la page GitHub d'Intel. Il nécessite également la version Windows 64 bits d'Audacity pour fonctionner. La chose la plus intuitive à propos de ce plug-in d'IA est qu'il apporte trois outils avancés à la fonction d'édition musicale d'Audacity : Le premier est la fonction « génération de musique ». Les utilisateurs peuvent utiliser du texte pour décrire la musique qu'ils souhaitent, et l'IA générera de la musique. clips dans les 60 secondes pour faciliter la publicité et la musique de film.

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Choisir la bonne tablette pour les étudiants en musique Jan 10, 2024 pm 10:09 PM

Quelle tablette convient aux musiciens ? Le haut-parleur de 12,9 pouces de l’iPad de Huawei est un très bon produit. Il est livré avec quatre haut-parleurs et le son est excellent. De plus, il appartient à la série pro, qui est légèrement meilleure que les autres styles. Dans l’ensemble, l’iPad Pro est un très bon produit. Le haut-parleur de ce téléphone mobile mini4 est petit et l'effet est moyen. Il ne peut pas être utilisé pour écouter de la musique en externe, vous devez quand même compter sur des écouteurs pour profiter de la musique. Des écouteurs avec une bonne qualité sonore auront un effet légèrement meilleur, mais des écouteurs bon marché d'une valeur de trente ou quarante yuans ne peuvent pas répondre aux exigences. Quelle tablette dois-je utiliser pour écouter de la musique de piano électronique ? Si vous souhaitez acheter un iPad de plus de 10 pouces, je vous recommande d'utiliser deux applications, à savoir Henle et Piascore. Fourni par Henle

Comment ajouter de la musique locale à la musique soda Feb 23, 2024 pm 07:13 PM

Comment ajouter de la musique locale à Soda Music ? Vous pouvez ajouter votre musique locale préférée à l'application Soda Music, mais la plupart des amis ne savent pas comment ajouter de la musique locale. Voici ensuite le didacticiel graphique sur la façon d'ajouter de la musique locale à Soda Music. l'éditeur. , les utilisateurs intéressés viennent jeter un œil ! Tutoriel sur l'utilisation de la musique soda. Comment ajouter de la musique locale à la musique soda. 1. Ouvrez d'abord l'application soda music et cliquez sur la zone de fonction [Musique] en bas de la page principale. l'icône [trois points] dans le coin inférieur droit ; 3. Enfin, développez la barre de fonctions ci-dessous et sélectionnez le bouton [Télécharger] pour l'ajouter à la musique locale.

Étapes détaillées pour afficher votre musique préférée sur Douyin Mar 26, 2024 pm 06:20 PM

1. Cliquez sur [+]. 2. Cliquez sur [Sélectionner la musique] ci-dessus. 3. Cliquez sur [Mes favoris]. Méthode 2 : 1. Ouvrez Douyin et cliquez sur [Moi]. 2. Cliquez sur [Collecter] à côté de l'avatar. 3. Cliquez sur [Musique]

Comment écouter de la musique sur WeChat Feb 23, 2024 pm 09:28 PM

Comment écouter de la musique sur WeChat ? Vous pouvez écouter votre musique préférée sur WeChat APP, mais la plupart des amis ne savent pas comment écouter leur musique préférée sur WeChat. Voici ensuite le didacticiel graphique sur la façon d'écouter de la musique sur WeChat proposé par l'éditeur. Les utilisateurs intéressés viennent jeter un œil ! Tutoriel d'utilisation de WeChat : Comment écouter de la musique sur WeChat 1. Ouvrez d'abord l'application WeChat, faites glisser vers le bas pour accéder à la page du mini programme 2. Cliquez ensuite sur [Musique] comme indiqué par la flèche dans l'image ci-dessous ; dans l'interface comme indiqué ci-dessous, entrez dans la zone de recherche Entrez le titre de votre chanson préférée ; 4. Enfin, sélectionnez le titre de la chanson correspondante et cliquez pour lire la chanson.

La relation entre js et vue Mar 11, 2024 pm 05:21 PM

La relation entre js et vue : 1. JS comme pierre angulaire du développement Web ; 2. L'essor de Vue.js en tant que framework front-end ; 3. La relation complémentaire entre JS et Vue ; Vue.

See all articles