评分系统和 CSS 精灵答案

【问题标题】：Rating system and CSS sprites评分系统和 CSS 精灵
【发布时间】：2013-08-17 08:14:35
【问题描述】：

我已经在我的网站中实施了基于受欢迎程度的三星级评级系统，但现在我的客户想要将这三颗星的颜色（默认蓝色）更改为显示受欢迎程度（程度）的红色、蓝色和绿色。

我已经使用 CSS sprite 实现了这个星级评分系统，其中我在一个 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;
}

精灵图像：

【问题讨论】：

你要做的是连续放置 3 个开始，每个星星可以是 3 种颜色之一？
完全正确..你明白了..
只是为了确定，你现在拥有的是三个开头，两个颜色？
是的，它们看起来很像
我对 css 完全陌生，这个系统是通过使用 css 逻辑和技术应用的，因此我很无助......请帮助我......

标签： php jquery css sprite

【解决方案1】：

您可以使用会话变量等通过使用 php/css 文件直接控制您的 CSS。您可以根据逻辑设置星形颜色、精灵位置。

链接到你的 CSS

<link rel='stylesheet' type='text/css' href='css/style.php' />

您的 css/php 文档

<?php
   header("Content-type: text/css; charset: UTF-8");

   $CSSposition = $position;
?>

span.stars span {
    background-position: <?php echo  $CSSposition ?>;
}

这里是php/css文档教程的链接click here

【讨论】：

伟大的似乎真的很接近我正在寻找的暗示它......谢谢......很多......
很高兴为您提供帮助。这是基于 php 输出控制 CSS 的最佳方式。如果此答案有帮助，请将其标记为已回答，谢谢。
它的工作原理不止于此，现在我可以将此系统修改为任何星星和颜色，非常感谢您的新想法.....

【解决方案2】：

查看这个关于淘汰赛的教程，他们展示了如何进行星级评分系统，您可以将其应用于您的代码http://learn.knockoutjs.com/#/?tutorial=custombindings

【讨论】：