02
Делаем рейтинг со звездочками просто !!!!!
Программирование
Метки (теги) : css, HTML, rating, рейтинг
Помню когда писал первый свой рейтинг со звездочками, то в голову пришла первая и как всегда с комом идея. Если допустить, что каждая звезда это какая то часть из 100%, то эта часть может быть разбита как минимум еще на две части, а то и на четыре. Ну например, у нас максимально может быть 5 звезд для отображения рейтинга на сайте. Значит каждая звезда 20%, половина звезды 10%, соответственно четверть звезды 5%, три четверти 15%. Итого у нас должно быть 5 картинок: пустая звезда, полностью закрашенная звезда, закрашенная на половину и на четверть (можно и дальше делить, но это уже совсем тупость), также на три четверти. После подсчета рейтинга у нас получилось, что данный продукт (может быть что угодно) имеет рейтинг 37% из ста. Тогда мы должны поступить так, 37/2 и отбросим остаток от деления, то получим 1 полностью закрашенную звезду, далее 17/15 опять откинем остаток и получим еще одну звезду закрашенную на три четверти, остается 2%, но звезды для 2% у нас нет, тогда мы либо игнорируем оставшуюся двойку, либо 37 превращаем в 40 по методу ближайшего большего целого числа, которое делиться на 5 без остатка. И тогда у нас получиться либо так
либо так
Но ведь можно и так
Этот способ намного проще и быстрее в исполнении. Вам лишь нужно иметь вот такого типа заготовку
дальше все просто
вот пример разметки
html
<div class="rating_empty"> <div class="rating_full" style="width: 37%;"></div> </div> |
css
.rating_empty { background: url(...) repeat-x scroll 0 0 transparent; width: ...; height: ...; } .rating_full { background: url(...) 0 100% repeat-x; height: ...; } |
Вместо троеточия подставьте свои значения.
Первый раз я такой подход подсмотрел в интернет магазине magento, за что разработчикам этого чуда огромное спасибо.
На этом все …