如何使用 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;

}

图片：

带有黄色星星的单个图像 (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 精灵来组合两个黄色和灰色星星合并成一个图像，使我们能够控制黄色星星的宽度来表示所需的评级。

优点：

• 简单轻便。
• 支持分数星级评级。
• 利用CSS 控制星星的外观。

以上是如何使用 jQuery 和 CSS 从数字输入动态生成星级？的详细内容。更多信息请关注PHP中文网其他相关文章！