Ось вам рішення, використовуючи лише одне дуже крихітне і просте зображення та один автоматично генерований прольотний елемент:
CSS
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
Зображення
(джерело: ulmanen.fi )
Примітка: робити НЕ хотлінк до зображення! Скопіюйте файл на власний сервер і використовуйте його звідти.
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
Якщо ви хочете обмежити зірки лише розмірами половини чи чверті, додайте один із цих рядків перед var sizeрядком:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
Використання
$(function() {
$('span.stars').stars();
});
Вихід
(джерело: ulmanen.fi )
Демо
http://www.ulmanen.fi/stuff/stars.php
Це, мабуть, відповідає вашим потребам. За допомогою цього методу вам не доведеться обчислювати жодних трьох чвертей чи не більше ширини зірки, просто дайте їй поплавок, і він дасть вам свої зірки.
Невелике пояснення того, як представлені зірки, може бути в порядку.
Сценарій створює два елементи блочного рівня. Обидва проміжки спочатку отримують розмір 80px * 16px та фонове зображення stars.png. Проміжки вкладені так, що структура прольотів виглядає так:
<span class="stars">
<span></span>
</span>
Зовнішній проміжок отримує background-positionзначення 0 -16px. Це робить видимими сірі зірки у зовнішньому прольоті. Оскільки зовнішній проміжок має висоту 16 пікселів repeat-x, він показуватиме лише 5 сірих зірок.
Внутрішня оболонка з іншого боку , є background-positionз 0 0яких робить тільки жовті зірки видно.
Звичайно, це може працювати з двома окремими файлами зображень, star_yellow.png та star_gray.png. Але оскільки зірки мають фіксовану висоту, ми можемо легко поєднати їх в одне зображення. Для цього використовується техніка спрайту CSS .
Тепер, коли прольоти вкладені, вони автоматично накладаються один на одного. У випадку за замовчуванням, коли ширина обох прольотів становить 80 пікселів, жовті зірки повністю затемнюють сірі зірки.
Але коли ми регулюємо ширину внутрішнього прольоту, ширина жовтих зірок зменшується, виявляючи сірі зірки.
З text-indent: -9999pxточки зору доступності, було б розумніше залишити число поплавця всередині внутрішнього прольоту і заховати його , щоб люди з вимкненим CSS побачили принаймні номер плаваючої точки замість зірок.
Сподіваюся, це мало сенс.
Оновлено 22.10.2010
Тепер ще компактніше і важче зрозуміти! Можна також стиснути до одного вкладиша:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
