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_3は、3つの星が明るい行を表示するように定義されます。

どうやってやるの？

ありがとう

4

3 に答える 3

2

この種のものはスプライトシートであり、シートを として、正しいサイズの要素を指定することによって実装されます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 スプライト ファイルの適切な画像の背景位置を (以前に提案したように) 動的に設定します。

最初に 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;の値に注意してください。

次に、css に一致するこの html があるとします。

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

ジャバスクリプト：

<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 スプライトに関する優れたチュートリアルがあります cssSprites

于 2012-07-14T21:48:27.107 に答える