用css製作星級評分_經驗交流

最初に効果を見てみましょう

ステップ 1: XHTML

• 1
li> ;2

• 3


• 4


• 5

ここでは静的テクノロジーのみを紹介します。次に、システムのアプリケーションが提供されます。自分でプログラムを追加して試してみることもできます。ajax を使用して豪華な効果を作成することもできます

ステップ 2: グラフィックス

スペースと帯域幅を節約するために、得点ボタンとして gif 画像を使用します。

画像

ステップ 3: CSS

.star-rated{ list-style: none; /* デフォルトのリスト画像の箇条書きをオフにします*/
margin: 3px; /* この周りにスペースは必要ありません*/
padding: /* 私は肛門です。 OL のデフォルトのパディングは 0px ですが、念のため 0px に設定します*/
width: 100px; /*このリストは 5 つ星で、各星は 20px であるため、5 倍にする必要があります。 20px = 100px width*/
height: 20px; /* 各星の高さは 20px であるため、リストの高さを星の高さに設定します。*/
location:相対; /*非常に重要です。後で絶対位置を使用します。*/
背景: url(star_rated.gif) /* この画像を水平方向に繰り返します。 */
}

既知のコードによると、
は ul と list のマージンとパディングを削除します。 -style 、高さ 20px、幅 100px のブロック

が降ってきたときのボタン要素の生成を定義します。 以下は css

です。 padding:0px; / * パディングはまったくありません*/ margin:0px; /* マージンはまったくありません*/
/**/ /*バックスラッシュ ハックにより、IE5 Mac ではこのルールが認識されなくなります*/
float: left;ブラウザー、左にフロートします。これで水平リストが作成されます*/
/* */ /* IE5 バックスラッシュ ハックを終了*/
}

このコードにより、li はIE5 の MAC バグを解決します

上記のボタン要素のスタイルを継承し、マウス アクションを定義します。 以下は css

です。 {

display:block; /* 高さと幅を変更できるようにブロック項目が必要です*/ width:20px; /* 簡単なことですが、幅を同じにします。 star width*/
height: 20px ; /* width と同じ*/
text-decoration: none; /* リンクから下線を削除します*/
text-indent: /* [url =http://www.php.cn/]画像置換技術[/url]を使用してテキストを画面からインデントします。テキストはもう表示されません。*/
z-index: 20 ; /*この */
位置に戻ります: 絶対; /* 親 UL を基準にして、各星の正確な x 座標と y 座標を制御できるようになります*/
パディング: / *もう一度言いますが、パディングは必要ありません*/
background-image:none; /* スターは表示されません*/
}

13. .star-rated li a :hover{
14. 背景: url(star_rated.gif) 左下; /*ここが魔法の場所*/
15. z-index: 1; /* この星を一番下に移動します。 z-index stack*/
16 . left: 0px; /*この星を UL 親アイテムの側面に合わせて左に移動します*/
17. }

下來我們要考慮怎樣才能顯示不同的星級，三星?四星?原理是什麼，我們繼續將背景圖片橫向重複顯示，然後定義a和a:hover的寬度來區分選擇的星級。

下面是css

   .star-rating a.one-star{
    left: 0px; -rating a.one-star:hover{
    width:20px;
    }
   .star-rating a.two-stars{
}  -rating a.two-stars:hover{
   width: 40px;
   }
   .star-rating a.three-stars{   left: 40px; -rating a.three-stars:hover{
   width: 60px;
   }
   .star-rating a.four-stars{   left: 60px; -rating a.four-stars:hover{
   width: 80px;
   }
   .star-rating a.five-stars{  left: 80px; -rating a.five-stars:hover{
   width: 100px;
   }


到此，這個製作完成


到此，這個製作完成


第一個模型中忽略了半星級的情況和無初始的星級，下來我們就是要解決這個問題。


Step 1. 先看效果|Check it in action

圖1

圖1

看看效果

Step 2: The XHTML

 

 

Currently 3.5/5 Stars.

 

1

 

2

 

3

 

4

 

5

 



和第一個模型的結構相似，唯一不同的是:

Currently 3.5/5 Stars.

定義初始值

Step 3: The Star Image

Step 3: The Star Image

Step 3: The Star Image

Step 3: The Star Image

我們製作一個有三個星的圖片，第一個星是空值，第二個是要選擇的值，第三個是真實的值。

圖2


Step 4: The CSS, the Magic



   .starstar-ratingli.curcurrent -rating{    background: url(star_rating..) left bottom;

    position: absolute;

    height: 30px;    z-index: 1;

    }

他定義了初始值，為了避免繼承容器ul的相對定位，採用position: absolute;每個星的高度為height:30px;別的就是隱藏文字和定義對齊方式。

空白css

    .star-rating{

    ...

   >

選擇值css


    .star-rating li a:hover{    background: 1(star_rating.url) left center;

初始值當然會隨著選擇變動，那麼要如何實現它的變化呢?

style=" width:105px;"

>Currently 3.5/5 Stars.

看了這段程式碼相信你就知道是什麼原因了!那這個width是怎麼計算的呢?

Average Rating|平均值: 3.5
Each Star Width|每個星的寬度: 30px;Set width to|將寬度設為: 3.5 * 30 = 105px

下面欣賞這個新模型吧
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical

我們用php來實現

首先是實現的原理

從上一個css實現星級評分I 、 II，可是看出，只要能識別onclick和將數據記錄至數據庫中存儲，然後從數據庫中調用出數據進行計算就
可以得到當前的評分均值——當前的分值。

1.以下是建立資料庫的sql

CREATE TABLE ratings(
 id INT NOT NULL AUTO_INCREMENT PRIMAR NULL,
 total_value INT NOT NULL,
 which_id INT NOT NULL,
 which_table VARCHAR(255),
 used_ips LONGTEXT NULL 2.參數檔引用

require("connectDB.php");require("closeDB.php");require(" tableName.php");

require("openDB.php");

?>


3.顯示投票程式和更新投票資料程式

$rating_posted=$_GET['vote'];//pased variable by the the stars value

$id=$_GET ['id'];$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Error: ".mysql_error()); $numbers=mysql_fetch_assoc($query);

$checkIP=unserialize($numbers['used_ips']);

$count=$numbers['total_votes'];//how many votes total 🎜>$current_rating=$numbers['total_value'];//total number of rating added together and stored
$sum=$rating_posted+$current_rating;// add together the current v value and the toote v. $tense=($count==1) ? "vote" : "votes";//plural form votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%" .$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.php.cn/ - this variable searches through the previous ip address that have voted and returns true or false

if($voted){
echo "

".
"

".
"
• Current rating.
" .
     "
• 1
".
     "
• 2
".
     "
• 3
".     "
• 4
".

     "

• 5
".
"

".
 "

Rating: ".@number_format($current_rating/$count,2)." {". $count." ".$tense." cast}
You have previously voted.

";//show the current value of the vote with the current numbers
}else{

if(isset($_GET['vote'])){

if($sum==0){
$added=0;//checking to see if the first vote 有 been tallied
}else{
$added=$count+1;//increment the current number of votes
}

if(is_array($checkIP)){

array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if it is an array i.e. already has entries the push in another value

}else{
$checkm ( REMOTE_ADDR']);//for the first entry
}

$insert=serialize($checkIP);

mysql_query("UPDATE $tableName SET total_votes='".$added."' , total_value='".$sum."', used_ips='".$insert."' WHERE id='".$_GET['id']."'");

echo  "

Rating: ".@number_format($sum/$added,2)." {".$added." ".$tense." cast} Thank you for your vote!

";//show the updated value of the vote
}else{
?>

4.訪客評分程序

 
  
  
  
 

如何這個教學清楚嗎？

• 目前評級

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

> ;

5.最新評分結果提示

echo "

評分： ".@number_format($sum/$count,2)." {".$count." ".$tense.";//顯示目前更新的投票值
} //結束isset get vote 
} //結束投票true, false
?>