+

дом баня из клееного бруса | Фильтр магистральный Big Blue 20, high. | бестарные перевозки сахара Описание на болты БСР ГОСТ 28778-90 прочитать можно здесь Долговечность любого сооружения зависит не только от качества строительных материалов, но и от надёжности крепежа. Учитывая важность последнего, мы изготавливаем болты БСР (болт распорный) ГОСТ 28778-90 в Екатеринбурге и предлагаем их на продажу в большом ассортименте. Придуманный отечественными конструкторами болт самоанкерующий распорный превосходит зарубежные анкерные болты.

Делаем рейтинг со звездочками просто !!!!!

Программирование

Метки (теги) : , , ,

Автор: admin

Помню когда писал первый свой рейтинг со звездочками, то в голову пришла первая и как всегда с комом идея. Если допустить, что каждая звезда это какая то часть из 100%, то эта часть может быть разбита как минимум еще на две части, а то и на четыре. Ну например,  у нас максимально может быть 5 звезд для отображения рейтинга на сайте. Значит каждая звезда 20%, половина звезды 10%, соответственно четверть звезды 5%, три четверти 15%. Итого у нас должно быть 5 картинок: пустая звезда, полностью закрашенная звезда, закрашенная на половину и на четверть (можно и дальше делить, но это уже совсем тупость), также на три четверти. После подсчета рейтинга у нас получилось, что данный продукт (может быть что угодно) имеет рейтинг 37% из ста. Тогда мы должны поступить так, 37/2 и отбросим остаток от деления, то получим 1 полностью закрашенную звезду, далее 17/15 опять откинем остаток и получим еще одну звезду закрашенную на три четверти, остается 2%, но звезды для 2% у нас нет, тогда мы либо игнорируем оставшуюся двойку, либо 37 превращаем в 40 по методу ближайшего большего целого числа, которое делиться на 5 без остатка. И тогда у нас получиться либо так

Рейтинг 35%

Рейтинг 35%

либо так

Рейтинг 40%

Рейтинг 40%

Но ведь можно и так

Рейтинг 37%

Рейтинг 37%

Этот способ намного проще и быстрее в исполнении. Вам лишь нужно иметь вот такого типа заготовку

Заготовка для рейтинга

Заготовка для рейтинга

дальше все просто

вот пример разметки
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, за что разработчикам этого чуда огромное спасибо.
На этом все …

Оставить комментарий

=