コメントなどに適したシンプルなスターセレクターの送信エフェクトをjsで実装します。_javascriptスキル

スターセレクター、投稿コードはコメントなどに適しています。

js ライブラリは使用せず、別の js コードです

コードをコピー コードは次のとおりです:

サービス

• 
  
  


• デフォルト レベル


• 1


• 2


• 3


• 4


• 5

価格

🎜>< ;input type="text" name="price" value="" title="ここで 2 に設定すると、デフォルトで 2 つの星が明るくなるという意味です。 " />

デフォルト レベル

1

3

4

a href="#" title="5 つ星中" class="five_stars">5

品質 ;

• 
  デフォルト レベル


• 1




• 3
• 4

5

;input type="submit" value="送信後にアドレスバーのパラメータを確認してください" />






コードをコピーします

コードは次のとおりです:

复制代 代码如下:

body{font-size: 12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_rated {list-style:none;margin:-1px 0 0 -1px;パディング:0;幅:70ピクセル;高さ:12ピクセル;位置:相対;背景:url(評価_星.gif) 0 0 繰り返し-x; overflow:hidden;font-size:0;}
.star_rated li{padding:0;margin:0;float:left;}
.star_rated li a{display:block;width:14px;height:12px ;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rated li a:hover{background:url(評価_stars.gif ) 0 12px;z-index:2;left:0;}
.star_rated a.one_star{left:0;}
.star_rated a.one_star:hover{width:14px;}
.star_rated a.two_stars{left:14px;}
.star_rated a.two_stars:hover{width:28px;}
.star_rated a.three_stars{left:28px;}
.star_rated a.three_stars:hover{ width:42px;}
.star_rated a.four_stars{left:42px;}
.star_rated a.four_stars:hover{width:56px;}
.star_rated a.four_stars{left:56px;}
.star_rated a.five_stars:hover{width:70px;}
.star_rated li.current_rated{background:url(評価_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent :-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}