Alrightは映画/レストランの平均格付けが4.3であると言います。ショーページには、オブジェクトの名前、説明、連絡先、画像などがあります。星の平均評価が表示されます。オブジェクトのモデルでは、すべてのユーザーの評価を格納し、単純な数式で平均を計算します。しかし、私が興味を持っているのは、どのようにして4つ星で4.5よりも少し少ない4.3を表すのかということです。 50枚のPNG画像を保存しすぎていませんか？前もって感謝します。彼らは平均的な映画の評価をimdb、腐ったトマトでどのように表していますか？
これは、実際には思ったよりもずっと簡単です。その後
の、簡単な画像マスクを使用すると、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>実際には1つ星で十分です。 – Christoph
ようこそ。最初に[HELP center]（http://stackoverflow.com/help）に進み、[How to Ask Question]（http://stackoverflow.com/help/how-to-ask）を読んで[MCVE ：最小、完全、および検証可能な例]（http://stackoverflow.com/help/mcve）周りの人が助けることができるなら、彼らはやります。しかし、SOはコミュニティを支援するコミュニティであり、**誰もあなたのためにすべての仕事をしないということを心に留めてください**。あなたはこれまでに何を試しましたか？...あなたのニーズに合ったスニペットがすでにたくさんあります。検索しましたか？ – OldPadawan