1

说我有以下 png

星图

在我的 HTML 中，来自 Ruby，我得到一个特定的评级值 (0,1,2,3,4,5)。根据该值，我想显示 png 的特定行。

我正在考虑根据值分配一个特定的类，然后定义该类以专注于该 png 图像的特定部分（使用某个位置）。但是，我看不到如何做到这一点，以及这是否是解决此问题的最佳方法。

换句话说，如果我有以下内容：

<span id='rating'> 3 </span>

我正在考虑做类似的事情：

<span id='rating' class='rating_3'> <img ..></img></span>

其中rating_3class 将被定义为仅显示 3 颗星亮的行。

我怎样才能做到这一点？

谢谢

4

3 回答 3

2

这种东西是一个 spritesheet，通过指定一个正确大小的元素来实现，表单为background-image. 然后，background-position用于移动纸张以显示正确的图像。

因此，在您的情况下，您只需将每行的高度乘以评级并将其用作位置。

于 2012-07-14T19:22:53.753 回答
1

我会使用 HTML5data-*属性来设置来自 Ruby 的特定评级值，例如（呈现的 html）：

<span class='rating' data-rating='3.5'></span>

然后我会使用一些 javascript/jQuery 来动态设置 png sprite 文件的正确图像背景位置（如前所述）。

首先将css属性设置为.rating选择器以使用精灵图像。如果你想使用你的精灵中的大星星，你可以将一个分配ID给父容器，例如

#rateBig .rating  {
 background-image: url('images/rating.png'); 
 background-repeat: no-repeat;
 width: 84px; 
 height: 16px;
 display: block; 
}

注意width: 84px;和height: 16px;值，它们对应于大星条的大小。

然后假设你有这个 html 来匹配我们的 css

<ul id="rateBig">
 <li>This line is rated 3.5 stars<br /><span class='rating' data-rating='3.5'></span></li>
</ul>

的JavaScript：

<script>
var dataRating, bkPos;
// function to set the backgroundPosition based on the value of the data-* attribute
// for the BIG stars
function getRateImageBig(dataRating){
 switch(dataRating){
  case 1:   bkPos =  "0 -19px";  return bkPos; break;
  case 1.5: bkPos =  "0 -38px";  return bkPos; break;
  case 2:   bkPos =  "0 -57px";  return bkPos; break;
  case 2.5: bkPos =  "0 -76px";  return bkPos; break;
  case 3:   bkPos =  "0 -95px";  return bkPos; break;
  case 3.5: bkPos =  "0 -114px"; return bkPos; break;
  case 4:   bkPos =  "0 -133px"; return bkPos; break;
  case 4.5: bkPos =  "0 -152px"; return bkPos; break;
  case 5:   bkPos =  "0 -171px"; return bkPos; break;
  default:  bkPos =  "0 0"; return bkPos;
 }
}
// go through each selector and get the value of the data-rating attribute
// call the getRateImageBig function to set the proper background position
$(document).ready(function() {
 $("#rateBig .rating").each(function(i){
  var selector = $(this);
  dataRating = selector.data("rating"); 
  getRateImageBig(dataRating);
  selector.css({"backgroundPosition": bkPos});
 }); // each
}); //  ready
</script>

基本上你可以对小星星做同样的事情。

顺便说一句，我使用spritecow 在线工具来获取精灵每个元素的正确背景位置。

在此处查看演示

于 2012-07-14T21:08:00.133 回答
0

Alist Apart有一个很好的关于 css sprites cssSprites的教程

于 2012-07-14T21:48:27.107 回答