Développement PHP : Comment implémenter la barre de progression de la lecture d'articles et la fonction de partage

Développement PHP : Comment implémenter la barre de progression de lecture d'articles et la fonction de partage

Introduction :
La barre de progression de lecture d'articles et la fonction de partage sont des fonctions importantes qui offrent aux utilisateurs une meilleure expérience de lecture et facilitent le partage de contenu. Dans le développement PHP, nous pouvons réaliser ces deux fonctions grâce à certains moyens techniques. Cet article vous présentera la méthode d'implémentation spécifique et donnera des exemples de code correspondants.

1. Implémentation de la barre de progression de la lecture de l'article
La clé pour implémenter la barre de progression de la lecture de l'article est d'obtenir la progression de la lecture de l'utilisateur actuel (c'est-à-dire la hauteur du document en cours de défilement), puis de la convertir en pourcentage relatif. à l'intégralité de l'article. Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Introduire la bibliothèque jQuery dans la page HTML :

   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

   Copier après la connexion

2. Définir le style de la barre de progression dans le fichier de style CSS :

   #progress-bar {
     width: 100%;
     height: 5px;
     background-color: #ebebeb;
   }
   
   #progress-fill {
     height: 100%;
     background-color: #00aaff;
   }

   Copier après la connexion

3. Implémenter la surveillance des événements de défilement et les mises à jour de la barre de progression dans les scripts JavaScript :

   $(document).ready(function() {
     $(window).scroll(function() {
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
   
    $('#progress-fill').css('width', scrollPercent + '%');
     });
   });

   Copier après la connexion

4. Insérez un élément de barre de progression dans la page HTML :

   <div id="progress-bar">
     <div id="progress-fill"></div>
   </div>

   Copier après la connexion

Grâce aux étapes ci-dessus, vous pouvez implémenter une simple barre de progression de lecture d'article.

2. Implémentation de la fonction de partage d'articles
La clé pour réaliser la fonction de partage d'articles est de partager le lien et le titre de l'article actuel sur diverses plateformes sociales via l'API des médias sociaux. Ce qui suit prend le partage Facebook comme exemple pour donner une méthode d'implémentation spécifique :

1. Introduisez le SDK JavaScript de Facebook dans la page HTML :

   <div id="fb-root"></div>
   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0&appId=YOUR_APP_ID&autoLogAppEvents=1" nonce="YOUR_NONCE"></script>

   Copier après la connexion

   Parmi eux, YOUR_APP_ID est l'ID d'application que vous obtenez après avoir créé une application sur la plateforme de développement Facebook .

2. Insérer un bouton de partage dans la page HTML :

   <div class="fb-share-button" data-href="当前文章链接" data-layout="button_count" data-size="small">
     <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=当前文章链接&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a>
   </div>

   Copier après la connexion

   Notez que vous devez remplacer le lien de l'article actuel par le lien de l'article lui-même.

Après les étapes ci-dessus, les utilisateurs peuvent cliquer sur le bouton Partager pour partager l'article actuel sur Facebook.

En résumé, grâce aux exemples de code ci-dessus, nous pouvons implémenter la barre de progression de lecture de l'article et les fonctions de partage. Les lecteurs peuvent encore améliorer et personnaliser ces deux fonctions en fonction de besoins spécifiques afin de mieux répondre à leurs propres sites Web ou applications. Je souhaite à tous bonne chance dans le développement !

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!