Wie kann ich mithilfe von jQuery und CSS dynamisch Sternebewertungen aus numerischen Eingaben generieren?

Umwandeln von Zahlen in Sternbewertungsanzeigen mit jQuery und CSS

Im Bereich der Anzeige von Bewertungen geht es darum, numerische Werte in Sternbewertungen umzuwandeln eine gemeinsame Herausforderung. Wie können wir mit jQuery und CSS dynamisch Sternebewertungen basierend auf numerischen Eingaben generieren?

Lösung:

Hier ist eine innovative Lösung, die ein einzelnes Bild nutzt und CSS:

CSS

<br>span.stars, span.stars span {<pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

}

span.stars span {

background-position: 0 0;

}

Bild:

Ein einzelnes Bild (stars.png) mit gelben Sternen oben und graue Sterne oben unten.

jQuery:

<br>$.fn.stars = function() {<pre class="brush:php;toolbar:false">return $(this).each(function() {
    var val = parseFloat($(this).html());
    var size = Math.max(0, (Math.min(5, val))) * 16;
    var $span = $('<span></span>').width(size);
    $(this).html($span);
});

}

HTML:

<br><span> <spanne class="stars">2.6545344</spanne></span><br><span><span class="stars">8</span><br></span>

Verwendung:

<br>$(function () {<pre class="brush:php;toolbar:false">$('span.stars').stars();

});

Ausgabe:

Diese Lösung verwendet CSS-Sprites, um beide Gelbtöne zu kombinieren und graue Sterne in einem einzigen Bild zusammenfügen, sodass wir die Breite der gelben Sterne steuern können, um das Gewünschte darzustellen Bewertung.

Vorteile:

• Einfach und leicht.
• Unterstützt gebrochene Sternebewertungen.
• Verwendet CSS zur Steuerung des Aussehens der Sterne.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von jQuery und CSS dynamisch Sternebewertungen aus numerischen Eingaben generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!