如何使用 jQuery 和 CSS 将数字转换为星级？-css教程-PHP中文网

如何使用 jQuery 和 CSS 将数字转换为星级？

Linda Hamilton

发布： 2024-12-14 20:14:11

原创

865 人浏览过

How Can I Transform Numbers into Star Ratings Using jQuery and CSS?

使用 jQuery 和 CSS 将任何数字转换为星级显示

从数值创建星级显示可以增强可视化效果网站和应用程序上的评论分数和产品评级。可以使用 jQuery 和 CSS 的组合来简化此任务。

jQuery 和 CSS 实现

解决方案涉及利用单个 CSS 图像和自动生成的跨度elements:

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

登录后复制

图片

注意：将stars.png图像复制到您自己的服务器并使用它

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value and ensure it is within 0-5 range
        var val = parseFloat($(this).html());
        val = Math.max(0, (Math.min(5, val)));
        // Calculate star width and create a span holder
        var size = val * 16;
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

登录后复制

HTML

<span>

登录后复制

使用

$(function() {
    $('span.stars').stars();
});

登录后复制

自定义

至将星星限制为一半或四分之一星星大小，修改 JavaScript 代码如下：

半颗星星： val = Math.round(val * 2) / 2;
四分之一星星： val = Math.round(val * 4) / 4;

说明

该脚本创建带有星星精灵背景图像的嵌套 span 元素。外部跨度包含灰色星星，而内部跨度包含黄色星星。通过调整内部跨度的宽度，黄色星星会显示出适当数量的灰色星星。

辅助功能注意事项

可以通过隐藏内部数值来提高辅助功能内部跨度使用 text-indent: -9999px;，确保其可用于辅助技术。

以上是如何使用 jQuery 和 CSS 将数字转换为星级？的详细内容。更多信息请关注PHP中文网其他相关文章！