PHP-Entwicklung: So implementieren Sie den Fortschrittsbalken für das Lesen von Artikeln und die Freigabefunktion

PHP-Entwicklung: So implementieren Sie den Fortschrittsbalken für das Lesen von Artikeln und die Funktion zum Teilen

Einführung:
Der Fortschrittsbalken für das Lesen von Artikeln und die Funktion zum Teilen sind wichtige Funktionen, die Benutzern ein besseres Leseerlebnis bieten und das Teilen von Inhalten erleichtern. In der PHP-Entwicklung können wir diese beiden Funktionen mit einigen technischen Mitteln erreichen. Dieser Artikel führt Sie in die spezifische Implementierungsmethode ein und gibt entsprechende Codebeispiele.

1. Implementierung des Artikellesefortschrittsbalkens
Der Schlüssel zur Implementierung des Artikellesefortschrittsbalkens besteht darin, den Lesefortschritt des aktuellen Benutzers (d. h. die Höhe des aktuell gescrollten Dokuments) zu ermitteln und ihn dann in einen relativen Prozentsatz umzuwandeln zum gesamten Artikel. Die spezifischen Implementierungsschritte lauten wie folgt:

1. Führen Sie die jQuery-Bibliothek in die HTML-Seite ein:

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

2. Definieren Sie den Fortschrittsbalkenstil in der CSS-Stildatei:

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

3. Implementieren Sie die Überwachung von Scroll-Ereignissen und Fortschrittsbalkenaktualisierungen in JavaScript-Skripten:

   $(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 + '%');
     });
   });

4. Fügen Sie ein Fortschrittsbalkenelement in die HTML-Seite ein:

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

Mit den oben genannten Schritten können Sie einen einfachen Fortschrittsbalken für das Lesen von Artikeln implementieren.

2. Implementierung der Artikel-Sharing-Funktion
Der Schlüssel zur Realisierung der Artikel-Sharing-Funktion besteht darin, den Link und den Titel des aktuellen Artikels über die Social-Media-API auf verschiedenen sozialen Plattformen zu teilen. Im Folgenden wird die Facebook-Freigabe als Beispiel für eine spezifische Implementierungsmethode verwendet:

1. Fügen Sie das JavaScript SDK von Facebook in die HTML-Seite ein:

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

   Unter diesen ist YOUR_APP_ID die Anwendungs-ID, die Sie nach dem Erstellen einer Anwendung auf der Facebook-Entwicklerplattform erhalten .

2. Teilen-Button in HTML-Seite einfügen:

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

   Beachten Sie, dass Sie den aktuellen Artikellink durch den Link des eigentlichen Artikels ersetzen müssen.

Nach den oben genannten Schritten können Benutzer auf die Schaltfläche „Teilen“ klicken, um den aktuellen Artikel auf Facebook zu teilen.

Zusammenfassend können wir anhand der obigen Codebeispiele den Fortschrittsbalken für das Lesen von Artikeln und die Freigabefunktionen implementieren. Leser können diese beiden Funktionen weiter verbessern und an ihre spezifischen Bedürfnisse anpassen, um sie besser an ihre eigenen Websites oder Anwendungen anzupassen. Wünsche allen viel Glück bei der Entwicklung!

Das obige ist der detaillierte Inhalt vonPHP-Entwicklung: So implementieren Sie den Fortschrittsbalken für das Lesen von Artikeln und die Freigabefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!