Es ist nicht schwer, eine Sternebewertungsfunktion zu erstellen, aber es ist etwas schwierig, sie einfach mit CSS zu schreiben. Machen wir zuerst einen Screenshot:
Der Effekt ist ganz einfach. Vielleicht haben Sie bereits die Idee, ihn umzusetzen. Werfen wir einen Blick auf unsere übliche Implementierungsmethode:
CSS:
Code
.jsstar
{ Listenstil: keiner;
Rand: 0px;
Polsterung: 0px;
Breite: 100px;
Höhe: 20px;
Position: relativ;
}
.jsstarli
{
Polsterung:0px;
Rand: 0px;
schweben: links;
Breite:20px;
Höhe:20px;
Hintergrund:url(star_rating.gif) 0 0 keine Wiederholung;
}
HTML:
<p>Javascript + CSS-Implementierung</p>
<ul class="jsstar">
<li title="Ein Stern"></li>
<li title="Zwei Sterne"></li>
<li title="Samsung"></li>
<li title="Vier Sterne"></li>
<li title="fünf Sterne"></li>
</ul>
JS: (Ich verwende Jquery)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left unten"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>
Hier ist die Darstellung:
Ist es nicht anders als oben, aber ich denke, wenn der Benutzer Javascript deaktiviert, wäre die Auswirkung dann nicht sehr katastrophal?
Deshalb haben wir darüber nachgedacht, reines CSS zu verwenden, um es zu implementieren. Hier ist der Code:
CSS:
Code
1 /*CSS-Sternstart*/
2.Sterne-Bewertung
3 {
4 Listenstil: keiner;
5 Rand: 0px;
6 Polsterung: 0px;
7 Breite: 100 Pixel;
8 Höhe: 20px;
9 Position: relativ;
10 Hintergrund: url(star_rating.gif) oben links wiederholen-x;
11 }
12.Sterne-Bewertungli
13 {
14 Polsterung: 0px;
15 Rand: 0px;
16 Schwimmer: links;
17}
18 .Sterne-Bewertung li a
19 {
20 Anzeige: Block;
21 Breite: 20px;
22 Höhe: 20px;
23 Textdekoration: keine;
24 Texteinzug: -9000px;
25 Z-Index: 20;
26 Position: absolut;
27 Polsterung: 0px;
28 }
29 .Sternebewertung li a:hover
30 {
31 Hintergrund: url(star_rating.gif) links unten;
32 Z-Index: 1;
33 links: 0px;
34}
35.Sterne-Bewertung ein.ein-Stern
36 {
37 links: 0px;
38 }
39.Sterne-Bewertung a.ein-Stern:hover
40 {
41 Breite: 20px;
42 }
43.Sterne-Bewertung a.zwei-Sterne
44 {
45 links: 20px;
46 }
47.Sterne-Bewertung a.zwei-Sterne:hover
48 {
49 Breite: 40px;
50 }
51.Sterne-Bewertung a.drei-Sterne:hover
52 {
53 Breite: 60px;
54 }
55.Sterne-Bewertung a.drei-Sterne
56 {
57 links: 40px;
58 }
59.Sterne-Bewertung a.vier-Sterne
60 {
61 links: 60px;
62 }
63.Sterne-Bewertung a.Vier-Sterne:hover
64 {
65 Breite: 80 Pixel;
66 }
67.Sterne-Bewertung a.Fünf-Sterne
68 {
69 links: 80px;
70}
71.Sterne-Bewertung a.Fünf-Sterne:hover
72 {
73 Breite: 100 Pixel;
74
75 }
HTML:
<ul class='star-rating'>
<li><a href='#' title='One Star' class='one-star'>1</a></li>
<li><a href='#' title='two stars' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='drei-sterne'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='fünf-sterne'>5</a></li>
</ul>
Wenn Sie sich die CSS-Zeilennummern oben ansehen, sind Sie schockiert, dass ein so einfacher Effekt so viel Code erfordert? Meiner Meinung nach können Sie ohne die Verwendung von JS nur einen Effekt und einen Stil erzielen. Wenn Sie einen einfacheren und schillernderen Effekt haben, lassen Sie es mich bitte wissen!