彼らは平均的な映画の評価をimdb、腐ったトマトでどのように表していますか？

Question

Alrightは映画/レストランの平均格付けが4.3であると言います。ショーページには、オブジェクトの名前、説明、連絡先、画像などがあります。星の平均評価が表示されます。オブジェクトのモデルでは、すべてのユーザーの評価を格納し、単純な数式で平均を計算します。しかし、私が興味を持っているのは、どのようにして4つ星で4.5よりも少し少ない4.3を表すのかということです。 50枚のPNG画像を保存しすぎていませんか？前もって感謝します。

Answer 1

これは、実際には思ったよりもずっと簡単です。その後

1. 行の金の星
2. の行灰色の星

の、簡単な画像マスクを使用すると、jsに相対して計算することができます。互いの上に積み重ねられた2つの要素を、想像してみてgolden starレイヤーの幅。

は、より詳細には、彼らは実際には非常に基礎としてスプライトを使用します。幅の値を持つ

プレイして、あなたは完全な効果わかります

document.querySelector(".one .gold").style.width = "83.5%"; 
 
document.querySelector(".two .gold").style.width = "56%";

div{position:relative;height:12px;margin-bottom:10px;width: 140px; 
 
    background:url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png')0 -28px; 
 
} 
 

 
span{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 12px; 
 
    background-image: url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png'); 
 
} 
 

 
.gold{background-position: 0 -42px;}

<div class="one"> 
 
    <span class="gold"></span> 
 
</div> 
 

 
<div class="two"> 
 
    <span class="gold"></span> 
 
</div>

を