星評価関数を作るのは難しくありませんが、CSS を使って単純に記述するのは少し難しいので、まずスクリーンショットを撮りましょう。
その効果は非常にシンプルです。もしかしたら、すでに頭の中でそれを実装するというアイデアがあるかもしれません。通常の実装方法を見てみましょう。
CSS:
コード
.jsstar
{ リストスタイル: なし;
マージン: 0px;
パディング: 0px;
幅: 100ピクセル;
高さ: 20ピクセル;
位置: 相対的;
}
.jsstarli
{
パディング:0px;
マージン: 0px;
フロート: 左;
幅:20ピクセル;
高さ:20ピクセル;
背景:url(star_rated.gif) 0 0 繰り返しなし;
}
HTML:
<p>JavaScript + CSS の実装</p>
<ul class="jsstar">
<li title="ワンスター"></li>
<li title="2 つ星"></li>
<li title="サムスン"></li>
<li title="4 つ星"></li>
<li title="5 つ星"></li>
</ul>
JS：（jQueryを使用します）
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(ドキュメント).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"背景位置":"左下"}).prev().trigger("マウスオーバー")},
function(){$(this).css({"背景位置":"左上"}).prev().trigger("マウスアウト")})
.click(function(){alert($(this).attr("title"))});
});
</script>
レンダリングは次のとおりです。
上記と何も変わりませんが、ユーザーが JavaScript を無効にすると、非常に悲惨な結果になるのではないかと思います。
そこで、純粋な CSS を使用して実装することを考えました。コードは次のとおりです。
CSS:
コード
1 /*CSS スターの開始*/
2.星評価
3 {
4 リスト形式: なし。
5 マージン: 0px;
6 パディング: 0px;
7 幅: 100ピクセル;
8 高さ: 20px;
9 位: 相対的。
10 背景: URL(star_rated.gif) 左上repeat-x;
11 }
12.星評価
13 {
14 パディング: 0px;
15 マージン: 0px;
16 フロート: 左;
17}
18 .star-rated li a
19 {
20 ディスプレイ: ブロック;
21 幅: 20ピクセル;
22高さ: 20ピクセル;
23 テキスト装飾: なし。
24 テキストインデント: -9000px;
25 Z インデックス: 20;
26 位置: 絶対的。
27 パディング: 0px;
28 }
29 .star-rated li a:ホバー
30 {
31 背景: URL(star_rated.gif) 左下;
32 z インデックス: 1;
33 左: 0px;
34}
35.星評価 a.1つ星
36 {
37 左: 0px;
38 }
39.星評価、1つ星:ホバー
40 {
41 幅: 20px;
42 }
43. 星評価 a. 2 つ星
44 {
45 左: 20px;
46 }
47. 星評価 a. 2 つ星: ホバー
48 {
49 幅: 40ピクセル;
50 }
51. 星評価 a. 3 つ星: ホバー
52 {
53 幅: 60ピクセル;
54 }
55. 星評価 a. 3 つ星
56 {
57 左: 40 ピクセル;
58 }
59.星評価 a.4つ星
60 {
61 左: 60 ピクセル;
62 }
63.星評価、4つ星:ホバー
64 {
65幅: 80ピクセル;
66 }
67.星評価 a.5つ星
68 {
69 左: 80 ピクセル;
70}
71.星評価、5つ星:ホバー
72 {
73 幅: 100ピクセル;
74
75 }
HTML:
<ul class='星評価'>
<li><a href='#' title='One Star' class='one-star'>1</a></li>
<li><a href='#' title='two-stars' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='three-stars'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
上記の CSS 行番号を見て、これほど単純な効果にこれほど多くのコードが必要であることにショックを受けましたか?私の考えでは、JS を使用しない場合は 1 つのエフェクトと 1 つのスタイルしか使用できません。もっとシンプルで魅力的なエフェクトがあれば、ぜひ教えてください。