Heim > Artikel > Web-Frontend > Mehrere Methoden des Javascript-Fortschrittsbalkens

Mehrere Methoden des Javascript-Fortschrittsbalkens

高洛峰Original: 2016-12-16 16:38:531094Durchsuche

Werfen wir zunächst einen Blick auf den endgültigen Effekt:

Der erste Schritt im Grunde
Erstellen Sie den Basiscode und sehen Sie sich die Effektdemonstration an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Der zweite Schritt besteht darin, dem Fortschrittsbalken eine Textanzeige hinzuzufügen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Das Prinzip besteht darin, relative Positionierung und absolute Positionierung zu verwenden und dann den Fortschritt durch verschiedene Hintergründe zu steuern. Als nächstes schauen wir uns die zweite Möglichkeit an, einen Fortschrittsbalken zu erstellen.
Der dritte Schritt, die zweite Möglichkeit, einen Fortschrittsbalken zu erstellen: Bilder + Hintergrundbilder direkt verwenden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Das Prinzip dieser Methode besteht darin, ein IMG-Bild zu verwenden und dann das IMG anzugeben Bild ein anderes Stellen Sie das Hintergrundbild ein und zeigen Sie verschiedene Teile über die Hintergrundpositionseigenschaft des Hintergrundbilds an.
Natürlich stellt diese Methode einige Anforderungen an Bilder. Wenn Sie genau hinsehen, werden Sie feststellen, dass die Breite doppelt so groß ist wie img.
Außerdem muss das Bild transparent sein, also hohl. hehe. Es ist kein Fortschrittsbalken sichtbar. Im Beispiel ist „Hintergrundposition“ der px-Wert. Tatsächlich können Sie ihn verwenden, um ihn genauer zu steuern, z. B. „Hintergrundposition: 80 % 50 %“ usw.
Im Allgemeinen sollte dies als Fähigkeit betrachtet werden und kann in tatsächlichen Projekten eingesetzt werden.

Der vierte Schritt, Anwendung
Zuletzt schauen wir uns eine einfache Anwendung an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style> 
*{

Verwenden Sie animate, um die Hintergrundposition des Bildes zu steuern, um den Fortschrittsbalkeneffekt zu erzielen.
Natürlich können Sie auch die erste Methode verwenden. Was bei der ersten Methode geändert werden muss, ist das Breitenattribut des Fortschrittsbalkens.

Weitere verwandte Artikel zu verschiedenen Methoden des Javascript-Fortschrittsbalkens finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：ProgressBar.js – Schöner responsiver SVG-FortschrittsbalkenNächster Artikel：ProgressBar.js – Schöner responsiver SVG-Fortschrittsbalken

In Verbindung stehende Artikel

Mehr sehen