Создать функцию звездного рейтинга несложно, но немного сложно написать ее просто с помощью CSS. Давайте сначала сделаем скриншот:
Эффект очень простой. Возможно, у вас уже есть идея реализовать его. Давайте посмотрим на наш обычный метод реализации:
CSS:
код
.jsstar
{ Стиль списка: нет;
поле: 0 пикселей;
отступ: 0 пикселей;
ширина: 100 пикселей;
высота: 20 пикселей;
положение: относительное;
}
.jsstarli
{
отступ: 0 пикселей;
поле: 0 пикселей;
плавать: влево;
ширина: 20 пикселей;
высота: 20 пикселей;
фон:url(star_rating.gif) 0 0 без повтора;
}
HTML:
<p>Реализация Javascript + CSS</p>
<ul class="jsstar">
<li title="Одна звезда"></li>
<li title="Две звезды"></li>
<li title="Samsung"></li>
<li title="Четыре звезды"></li>
<li title="пять звезд"></li>
</ul>
JS: (я использую jquery)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<тип сценария="текст/javascript">
$(документ).ready(функция(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left down"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</скрипт>
Вот рендеринг:
Это ничем не отличается от вышеописанного, но тогда я думаю, если пользователь отключит javascript, не будет ли эффект очень катастрофическим?
Поэтому мы подумали об использовании чистого CSS для его реализации. Вот код:
CSS:
код
1 /*Звездное начало CSS*/
2.звездный рейтинг
3 {
4 стиля списка: нет;
5 полей: 0 пикселей;
6 отступов: 0 пикселей;
7 ширина: 100 пикселей;
8 высота: 20 пикселей;
9 позиция: относительная;
10 фон: url(star_rating.gif) верхний левый повтор-x;
11 }
12.звездность
13 {
14 отступ: 0 пикселей;
15 полей: 0 пикселей;
16 поплавок: левый;
17}
18 .звездный рейтинг li a
19 {
20 дисплей: блок;
21 ширина: 20 пикселей;
22 высота: 20 пикселей;
23 текстовых оформления: нет;
24 отступ текста: -9000px;
25 z-индекс: 20;
26 позиция: абсолютная;
27 отступ: 0 пикселей;
28 }
29 .звездный рейтинг li a:hover
30 {
31 фон: URL(star_rating.gif) слева внизу;
32 z-индекс: 1;
33 слева: 0 пикселей;
34}
35.звездный рейтинг
36 {
37 слева: 0 пикселей;
38 }
39.звездный рейтинг а.одна звезда:наведите указатель мыши
40 {
41 ширина: 20 пикселей;
42 }
43.звездный рейтинг а.две звезды
44 {
45 слева: 20 пикселей;
46 }
47.звездный рейтинг а.две звезды:наведите указатель мыши
48 {
49 ширина: 40 пикселей;
50 }
51.звездный рейтинг а.три звезды:наведите указатель мыши
52 {
53 ширина: 60 пикселей;
54 }
55.звездный рейтинг а.три звезды
56 {
57 слева: 40 пикселей;
58 }
59.звездный рейтинг а.четыре звезды
60 {
61 слева: 60 пикселей;
62 }
63.звездный рейтинг а.четыре звезды:наведите указатель мыши
64 {
65 ширина: 80 пикселей;
66 }
67.звездный рейтинг а.пять звезд
68 {
69 слева: 80 пикселей;
70}
71.звездный рейтинг a.пять звезд:наведите указатель мыши
72 {
73 ширина: 100 пикселей;
74
75 }
HTML:
<ul class='star-rating'>
<li><a href='#' title='Одна звезда' class='one-star'>1</a></li>
<li><a href='#' title='two stars' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='three-stars'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
Глядя на приведенные выше номера строк CSS, вы шокированы тем, что для такого простого эффекта требуется так много кода? На мой взгляд, без использования JS можно создать только один эффект и один стиль. Если у вас есть более простой и потрясающий эффект, дайте мне знать!