自動生成星級評定？

我試圖找到一些方法將數字1 - 5轉換成星級評分，它也可以包含小數點，如4.3或3.34，並且非常精確（如在Amazon.com上）。評級不一定要可用，它只是一個靜態圖像。任何幫助？自動生成星級評定？

我很好用PHP或jQuery的，無論它需要。

2011-05-04 AKor

這應該被標記'css' – andrewtweber 2011-05-04 23:04:24

你試圖顯示此或產生多少？請更具體一些。 – Flipper 2011-05-04 23:07:14

亞馬遜只有全/半星評級顯示。他們使用一個包含兩個相關部分的精靈：一個十星級部分，五個部分填充，一個十星級部分填充4.5個部分。他們定位該背景圖像，以便顯示一定數量的完整段，並根據是否有半星來選擇要使用哪個段。 – theazureshadow 2011-05-04 23:08:54

您可以創建一個帶有透明星形切口的白色圖像。然後將其放置在給定長度的黃色div的頂部。可以說你的圖像寬度是100px。如果你有3星評級，你會使黃色格100 *（3/5）和3顆星將被填充。

編輯：一個類似的想法。你可以有一個圖像與所有5星。將此圖像放在帶有溢出的div中：隱藏。然後你像上面一樣設置div的寬度。分區越小，你會看到的星星越少。

EDIT2：只是爲了好玩小提琴。您可以要求的所有粒度。 http://jsfiddle.net/qFMyC/

2011-05-04 23:03:05

夢幻般的答案 – 2011-05-05 02:26:58

這必須足以滿足您的目的：

2011-05-04 23:05:06

我希望你的意思是打開1-5值轉換成實際的星表示。

這取決於你想要的精細程度是，我認爲亞馬遜的是精確到十分之一的（0.1），這可能是實現服務器端，以節省客戶端負載，並採取緩存圖像的優勢;但它可以在客戶端完成。

@kingjiv貼好客戶端的解決方案，但對於服務器端：

如果你不是太擔心粒度，你可以創建11個圖像0，0.5，1，1.5等等，等等，並通過價值進入圖像的src屬性。這將提供正確的圖像，並且它們會很好地緩存，以便在您的網頁上重複使用。

如果你想成爲真正的顆粒狀儘管你可以在代碼服務器端創建它們，將它們緩存在創建每個準備迅速開始投放後的時間。用這種方法，你可以去任何你想象的準確度。

對於PHP，我建議在看Imagik

2011-05-04 23:09:50 Paystey

我過去所做的是創造2周的div並把他們在彼此的頂部。

在格設置寬度等於5星的寬度底部。所以，如果你的星星是50px寬，你的底部div是250px寬。

在頂部的div上，你使用不同顏色的同一顆星星。然後你在php或javascript中設置div的寬度爲50 * $ decimalStarRating。

2011-05-04 23:27:50 ChrisChristensen

我前寫這篇青睞。我癡迷於不使用JS。它需要一些工作，但我認爲這正是你要找的。

http://yefomit.com/internet/simple_css_rater

2011-05-04 23:51:07 Tim

優秀的作品+寫作 – 2011-05-05 02:28:21

回答