我已经在我的网站上实现了基于流行度计数的三颗星评级系统,但现在我的客户想要将这三颗星的颜色(默认蓝色)更改为显示(程度)流行度的红色、蓝色和绿色。
我已经使用 CSS sprites 实现了这个星级评分系统,其中我在一个 sprite 中包含了两个星形图像 - 金色和灰色,并使用一些逻辑显示这些图像。适用于一种颜色,但如何为每个星星实现三种颜色?
HTML
<div class="star-box">
<li>
<span class="stars"><?php echo $position;?></span>
</li>
</div>
PHP
if( !isset($_SESSION['ranking']) || $_SESSION['ranking']['points'] <= 1000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points'] * 0.14).'px';
$position = 0.75;
}
$str1 = 'class="active" ';
$str1 .= ' style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 1000 && $_SESSION['ranking']['points'] <= 5000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points']*0.035).'px';
$position = 1.40;
}
}
jQuery
$(function() {
$('span.stars').stars();
});
$.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
val = Math.round(val * 4) / 4;
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);
});
}
CSS
span.stars, span.stars span {
display: block;
background: url(../../images/stars.png) 0 -16px repeat-x;
width: 50px;
height: 20px;
text-indent: -9999px;
}
span.stars span {
background-position: 0 0;
}
精灵图像: