Verwenden Sie CSS, um Sternebewertungen zu erstellen_Erfahrungsaustausch-CSS-Tutorial-php.cn

Schauen wir uns zunächst die Wirkung an

Schritt 1: XHTML

Hier wird nur statische Technologie vorgestellt, und Dann wird die Anwendung des Systems angegeben. Sie können das Programm auch selbst hinzufügen, um es auszuprobieren. Sie können auch Ajax verwenden, um wunderschöne Effekte zu erstellen.

Schritt 2: Grafiken

Um Platz und Bandbreite zu sparen, verwenden wir GIF-Bilder, die als Bewertungsschaltflächen dienen.

Bild Verwenden Sie CSS, um Sternebewertungen zu erstellen_Erfahrungsaustausch

Schritt 3: CSS

.star-rating{

Listenstil: keine; /* die standardmäßigen Listenbildaufzählungszeichen ausschalten*/ margin: 3px; /*Ich möchte nicht etwas Platz um dieses Ding herum*/
padding: 0px; /* Ich bin anal Ich bin mir ziemlich sicher, dass OLs einen Standardabstand von 0 Pixel haben, aber wir setzen ihn aus Sicherheitsgründen auf 0 Pixel 20px = 100px breit*/
Höhe: 20px; /* Die Höhe jedes Sterns beträgt 20px. Da es sich um eine horizontale Liste handelt, stellen wir die Listenhöhe auf die Höhe des Sterns ein.*/
Position: relative; /*Sehr wichtig. Wir wollen die relative absolute Positionierung verwenden.*/
Hintergrund: url(star_rating.gif) oben links wiederholen-x; /* Durch horizontales Wiederholen , die Liste scheint fünf Sterne zu haben.*/
}

Laut dem Code, den wir kennen:

entfernt den Rand und die Auffüllung von ul und list -style , definiert die Produktion des Schaltflächenelements, wenn ein Block mit einer Höhe von 20 Pixel und einer Breite von 100 Pixel
herunterkommt. Das Folgende ist CSS

.star-rating li{

padding:0px; / * überhaupt kein Rand*/

margin:0px; /* überhaupt kein Rand*/ /**/ /*Backslash-Hack, der dazu führt, dass IE5 Mac diese Regel NICHT sieht*/
float: left; /* für alle anderen Browser, wir werden nach links schweben, das erstellt eine horizontale Liste*/
/* */ /* Beende den IE5 Backslash-Hack*/
}

Dieser Code ermöglicht li horizontal angeordnet sein und den IE5-MAC-Fehler beheben

Erben Sie den obigen Schaltflächenelementstil und definieren Sie dann die Mausaktion. Das Folgende ist das CSS

.star-rating li a {

display:block; /* wir wollen ein Blockelement, damit wir mit seiner Höhe und Breite herumspielen können*/

width:20px; /* einfache Sache, wir wollen, dass die Breite mit der übereinstimmt Sternbreite*/ Höhe: 20px ; /* gleich der Breite*/
Textdekoration: keine; /* Unterstreichung aus dem Link entfernen*/
Texteinzug: -9000px /*; Ziehen Sie den Text mit einer [url =http://www.php.cn/]Bildersetzungstechnik[/url] vom Bildschirm ein, wir wollen den Text nicht mehr sehen.*/
z-index: 20 ; /*wir kommen darauf zurück */
position: absolute; /*wir können jetzt die genauen x- und y-Koordinaten jedes Sterns relativ zum übergeordneten UL steuern*/
padding: 0px; *noch einmal brauchen wir keine Polsterung*/
Hintergrundbild:none; /*wir werden den Stern nicht anzeigen*/
}

13. .star-rating li a :hover{
14. Hintergrund: url(star_rating.gif) links unten; /*hier ist die Magie*/
15. z-index: 1; /*verschiebe diesen Stern nach unten Z-Index-Stack*/
16 . left: 0px; /*diesen Stern ganz nach links verschieben, ausgerichtet an der Seite des UL-Elternelements*/
17. }

Als nächstes müssen wir überlegen, wie wir unterschiedliche Sterne anzeigen können. Was ist das Prinzip? Wir wiederholen das Hintergrundbild weiterhin horizontal und definieren dann die Breite von a und a: Hover, um die Auswahl zu unterscheiden Sternsterne.

Das Folgende ist CSS

.star-rating a.one-star{
left: 0px;
}
. star -rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
. star -rating a.two-stars:hover{
width: 40px;
}
.star-rating a. three-stars{
left: 40px;
}
. star -rating a. three-stars:hover{
width: 60px;
}
.star-rating a.four-stars{
left: 60px;
}
. star -rating a.four-stars:hover{
width: 80px;
}
.star-rating a.four-stars{
left: 80px;
}
. Sternebewertung a. five-stars:hover{
width: 100px;
}

An diesem Punkt ist die Produktion abgeschlossen

Der erste Modell Wenn wir die Halbstern-Situation und die nicht-anfängliche Sternebewertung ignorieren, werden wir dieses Problem als nächstes lösen.

Schritt 1. Überprüfen Sie es in Aktion

Verwenden Sie CSS, um Sternebewertungen zu erstellen_Erfahrungsaustausch
Bild 1

Überprüfen Sie es in Aktion

Schritt 2: Das XHTML

Derzeit 3,5/5 Sterne.

1< ;/li>
2

Und das erste Die Strukturen der Die Modelle sind ähnlich, der einzige Unterschied ist:

Aktuell 3,5/5 Sterne.

Definieren Sie den Anfangswert

Schritt 3: Das Sternbild

Wir erstellen ein Bild mit drei Sternen und der zweite Stern ist ein Nullwert. Der erste ist der auszuwählende Wert und der dritte ist der tatsächliche Wert.

Verwenden Sie CSS, um Sternebewertungen zu erstellen_Erfahrungsaustausch
Abbildung 2

Schritt 4: Das CSS, die Magie

.star-rating li.current -rating{
Hintergrund: url(star_rating.gif) links unten;
Position: absolut;
Höhe: 30px;
Anzeige: Block;
Texteinzug: -9000px;
z-index: 1;
}

Er definiert den Anfangswert. Um die relative Positionierung des Containers ul zu vermeiden, wird position: absolute die Höhe jedes Sterns verwendet ist height:30px; Die anderen verbergen Text und definieren die Ausrichtung.

Nullwert-CSS

.star-rating{
…
Hintergrund: url(star_rating.gif) oben links wiederholen-x;
}

Wert CSS auswählen

.star-rating li a:hover{
Hintergrund: url(star_rating.gif) links in der Mitte;
…
}

Natürlich ändert sich der Anfangswert mit der Auswahl. Wie kann man diese Änderung erreichen?

Stil = "width:105px;">Derzeit 3,5/5 Sterne.

Ich glaube, Sie werden den Grund kennen, nachdem Sie diesen Code gelesen haben ? Wie lautet die Berechnung?

Durchschnittliche Bewertung|Durchschnitt: 3,5
Jede Sternbreite|Breite jedes Sterns: 30px;
Breite einstellen auf|Breite einstellen auf: 3,5 * 30 = 105px

Werfen wir einen Blick auf dieses neue Modell
* Beispiel 1: 150 x 30-Sterne-Bewertungssystem
* Beispiel 2: 125 x 25-Sterne-Bewertungssystem
* Beispiel 3: 25 x 125 vertikale Sternebewertung System

Wir verwenden PHP, um es zu implementieren

Das erste ist das Prinzip der Implementierung

Erzielen Sie eine Sternebewertung vom vorherigen css I, II, aber es ist ersichtlich, dass, solange onclick identifiziert werden kann und die Daten aufgezeichnet und in der Datenbank gespeichert werden und dann die Daten zur Berechnung aus der Datenbank abgerufen werden,
Sie den aktuellen Durchschnitt erhalten können Punktestand – der aktuelle Punktestand.

1. Das Folgende ist die SQL zum Erstellen der Datenbank

CREATE TABLE reviews(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
which_id INT NOT NULL,
which_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2. Parameterdateireferenz

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. Abstimmungsprogramm anzeigen und Abstimmungsdatenprogramm aktualisieren

$rating_posted=$_GET['vote'];//Variable um den Sternwert gepased
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Fehler: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /wie viele Stimmen insgesamt
$current_rating=$numbers['total_value'];//Gesamtzahl der Bewertungen addiert und gespeichert
$sum=$rating_posted+$current_rating;// addieren Sie den aktuellen Stimmenwert und die Gesamtstimmenwert
$tense=($count==1) ? "vote" : "votes";//Pluralform votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.php.cn/ - Diese Variable durchsucht die vorherige IP-Adresse, die abgestimmt hat, und gibt „true“ oder „false“ zurück

if($voted){
echo "

".
"< ;ul class="star-rating">".
"

".
"

4< ;/li> ;".
"

".
"".
"

Bewertung: {".$tense cast}
Sie haben bereits abgestimmt.

";//zeige den aktuellen Wert der Stimme mit den aktuellen Zahlen
}else{

if(isset($_GET['vote'])) {

if($sum==0){
$added=0;//überprüft, ob die erste Stimme gezählt wurde
}else{
$added=$count +1; //Erhöhe die aktuelle Anzahl der Stimmen
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if Es ist ein Array, d. h. es hat bereits Einträge, die in einen anderen Wert verschoben werden
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//für den ersten Eintrag
}

$ insert=serialize($checkIP);
mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert ."' WHERE id='".$_GET['id']."'");

echo "

Rating: ".@ number_format($sum/$added,2)." {".$tense cast}

";//zeige den aktualisierten Wert der Stimme
}else{
?>

4. Besucherbewertungsprogramm

  CSS: Star Rater-Beispiel

Wie War dieses Tutorial klar?