Mehrere Methoden des Javascript-Fortschrittsbalkens-js-Tutorial-php.cn

Mehrere Methoden des Javascript-Fortschrittsbalkens

高洛峰

Freigeben： 2016-12-16 16:38:53

Original

1147 Leute haben es durchsucht

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

Mehrere Methoden des Javascript-Fortschrittsbalkens

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

Nach dem Login kopieren

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!