如何使用 jQuery 和 CSS 從數位輸入動態產生星級？-css教學-PHP中文網

如何使用 jQuery 和 CSS 從數位輸入動態產生星級？

Susan Sarandon

發布： 2024-12-14 15:39:21

原創

805 人瀏覽過

How Can I Dynamically Generate Star Ratings from Numerical Input Using jQuery and 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;

登入後複製

}

圖片：

帶有黃色星星的單一影像(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 />').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 精靈來組合兩個黃色和灰色星星合併成一個圖像，使我們能夠控制黃色星星的寬度來表示所需的評級。

優點：

簡單輕便。
支援分數星級評級。
利用CSS 控制星星的外觀。

以上是如何使用 jQuery 和 CSS 從數位輸入動態產生星級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！