Use css to create star ratings_Experience exchange-CSS Tutorial-php.cn

先看效果

Step 1: XHTML

這裡只介紹靜態的技術，隨後會給出系統的應用，你也是自己加程序來嘗試一下，還可以採用ajax來做出絢麗的效果

Step 2:圖片|Graphics

為了節省您的空間和寬頻，我們採用gif圖，這個圖片就是打分數的按鈕。 Use css to create star ratings_Experience exchange

圖

Step 3:CSS

    margin: 3px; /*I wan't some space around this thing*/
    padding: 0px; pretty sure OL's have a default padding of 0px、 20px = 100px wide*/
    height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the ight of the relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
    background: url(star_rating.) top left repeat-x background: url(star_rating.) top left repeat-xally left , the list will appear to have five stars.*/
    }

根據代碼我們知道：

去掉了ulpad的margin和padding以及list-style ，定義了高20px寬100px的一個區塊
下來時按鈕元素的製作，下面是css

.star-rating li{

    pad:0p ; * no padding at all*/    margin:0px; /* no margin at all*/
    /**/ /*反斜線 hack，這會導致 IE5 Mac 看不到此規則*/
    float: any*/
    float: left; /* for anyhft; to float left, this makes a horizontal list*/
    /* */ /* end the IE5 Backslash hack*/
    }

解決IE5 MAC bug

繼承上面的按鈕元素樣式，再定義滑鼠動作，下面是css

   .star-rating li a{ : display: we want a block item, so that we can mess with its height and width*/
    width:20px; /* easy stuff, we want the width to be the same as the starstar width*/    text-decoration: none; /* remove the underline from the link*/
    text-indent: -9000px; /* indent the texto the offing a [urlus the . =http://www.php.cn/]image-replacement technique[/url], we dont want to see the text anymore.*/
    z-index: 20; /*we'll come back to this */
    position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
    padding: 0px; padding*/
   background-image:none; /* we will not show the star*/
   }

13. ground.star-rating li a:hover{
13. ground.star-rating li a:hover{ url(star_rating.gif) left bottom; /*this is where the magic is*/
15. z-index: 1; /*move this star to the bottom of the z-index stack*/
16 . left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/
17. }

次に、異なる星評価を表示する方法を考えなければなりません。3 つ星ですか? 4 つ星ですか? 背景画像を水平方向に繰り返し、選択したものを区別するために a と a:hover の幅を定義します。スタースター。

以下は css

.star-rated a.one-star{
left: 0px;
}
です。 star -評価 a.one-star:hover{
width:20px;
}
.star-評価 a.two-stars{
left:20px;
}
。 star -評価 a.two-stars:hover{
幅: 40px;
}
.star-評価 a.three-stars{
左: 40px;
}
。星評価 a.three-stars:hover{
幅: 60px;
}
.star-評価 a.four-stars{
左: 60px;
}
。星評価 a.four-stars:hover{
幅: 80px;
}
.star-評価 a.five-stars{
左: 80px;
}
。 star -評価 a.five-stars:hover{
width: 100px;
}

この時点で制作は完了です

最初モデル半分のスターの状況と初期のスター評価以外を無視して、次にこの問題を解決します。

ステップ 1. 実際に動作を確認します

Use css to create star ratings_Experience exchange
写真 1

実際に動作を確認してください

ステップ 2: XHTML

現在 3.5/5星。

1< ;/li>
2

そして最初のものの構造モデルは似ていますが、唯一の違いは次のとおりです。

現在 3.5/5 つ星です。

初期値を定義します

ステップ 3: 星のイメージ

最初の星は null 値で、2 番目の星はヌル値です。 star は null 値で、最初の値は選択される値で、3 番目は実際の値です。

Use css to create star ratings_Experience exchange
図 2

ステップ 4: CSS、マジック

.star-rated li.current -評価{
背景: url(star_rated.gif) 左下;
位置: 絶対;
高さ: 30px;
表示: ブロック;
テキストインデント: -9000px;
z-index: 1;
}

コンテナ ul の相対位置の継承を避けるために、position:Absolute が各星の高さを使用します。 is height:30px; 他のものはテキストを非表示にし、配置を定義しています。

null value css

.star-rated{
…
背景: url(star_rated.gif) 左上repeat-x;
}

値を選択 css

.star-rated li a:hover{
バックグラウンド: url(star_rated.gif) left center;
…
}

もちろん、初期値は選択に応じて変わります。その変更を実現するにはどうすればよいでしょうか?

style = "width:105px;">現在 3.5/5 つ星。

このコードを読めば、幅が何なのかがわかると思います。計算は何ですか?

平均評価|平均: 3.5
各星の幅|各星の幅: 30px;
幅を設定|幅を設定: 3.5 * 30 = 105px

この新しいモデルを見てみましょう
* 例 1: 150 x 30 の星評価システム
* 例 2: 125 x 25 の星評価システム
* 例 3: 25 x 125 の垂直星評価システム

実装には php を使用します

最初は実装の原則です

前からの星評価を達成しますcss I、II ですが、onclick が識別でき、データがデータベースに記録および保存され、計算のためにデータベースからデータが呼び出される限り、
現在の平均値を取得できることがわかります。スコア - 現在のスコア。

1. 以下はデータベースを作成する SQL です

CREATE TABLE ratings(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
what_id INT NOT NULL,
what_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2. パラメータファイル参照

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. 投票プログラムの表示と投票データの更新プログラム

$rated_posted=$_GET['vote'];//変数を星の値によってパスしました
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" エラー: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /合計投票数
$current_rated=$numbers['total_value'];//合計して保存された評価の合計数
$sum=$rated_posted+$current_rated;// 現在の投票値と合計投票値
$tense=($count==1) ? "vote" : "votes";//複数形 votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName) WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //パターンマッチ ip:Bramus が提案! http://www.php.cn/ -この変数は、投票した以前の IP アドレスを検索し、true または false を返します

if($voted){
echo "

".
"< ;ul class="star-rated">".
"

".
"

4< ;/li> ;".
"

".
"".
"

評価: {".$count." ".$tense."
あなたは以前に投票しました。

";//現在の投票値を現在の数値で表示
}else{

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

if($sum==0){
$added=0;//最初の投票が集計されたかどうかを確認します
}else{
$added=$count +1; //現在の投票数を増分します
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//ifこれは配列です。つまり、すでにエントリがあるため、別の値をプッシュします
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//最初のエントリの場合
}

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

echo "

評価: ".@number_format($sum/$added,2)." {".$added." "cast" ご投票いただきありがとうございます!

";// 投票の更新された値を表示
}else{
?>

4. 訪問者評価プログラム

  CSS: Star Rater Example

How clear was this tutorial?