jQuery と CSS を使用して数値入力から星評価を動的に生成するにはどうすればよいですか?

jQuery と CSS を使用して数値を星評価表示に変換する

評価を表示する領域では、数値を星評価に変換します。共通の課題。 jQuery と CSS を使用して、数値入力に基づいて星による評価を動的に生成するにはどうすればよいですか?

解決策:

これは、単一の画像とデータを活用する革新的なソリューションです。 CSS:

CSS

<br>span.stars、span.stars span {<pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

}

span.stars スパン{

background-position: 0 0;

}

画像:

黄色の星が付いた 1 つの画像 (stars.png)上部に灰色の星があります一番下。

jQuery:

<br>$.fn.stars = function() {<pre class="brush:php;toolbar:false">return $(this).each(function() {
    var val = parseFloat($(this).html());
    var size = Math.max(0, (Math.min(5, val))) * 16;
    var $span = $('<span></span>').width(size);
    $(this).html($span);
});

}

HTML:

<br><span> 2.6545344</span><br><span><span class="stars">8</span><br></span>

使用法:

<br>$(function () {<pre class="brush:php;toolbar:false">$('span.stars').stars();

});

出力:

このソリューションは、CSS スプライトを使用して両方の黄色を結合します灰色の星を 1 つの画像にまとめて、黄色の星の幅を制御して目的のイメージを表現できるようにします。

利点:

• シンプルで軽量。
• 分数の星評価をサポート。
• を利用星の外観を制御する CSS。

以上がjQuery と CSS を使用して数値入力から星評価を動的に生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。