Answers:
这是为您提供的解决方案,仅使用一个非常小而简单的图像和一个自动生成的span元素:
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;
}
(来源:ulmanen.fi)
注意:千万不要热链接上面的图像!将文件复制到您自己的服务器上,然后从那里使用它。
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
如果您希望将星星限制为仅星星大小的一半或四分之一,请在行之前添加以下行之一var size
:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
$(function() {
$('span.stars').stars();
});
(来源:ulmanen.fi)
这可能会满足您的需求。使用这种方法,您不必计算任何四分之三或任何其他的恒星宽度,只需给它一个浮点数,它就会为您提供恒星。
关于如何呈现恒星的一些简短解释可能是有条理的。
该脚本创建两个块级跨度元素。最初,这两个跨度的大小均为80px * 16px,并且背景图片为star.png。跨度是嵌套的,因此跨度的结构如下所示:
<span class="stars">
<span></span>
</span>
外部跨度background-position
为0 -16px
。这样就可以看到外部跨度中的灰色星星。由于外部跨度的高度为16px和repeat-x
,它将仅显示5个灰色星体。
在另一方面内宽度具有background-position
的0 0
,这使得只有黄色星星可见。
这当然可以使用两个单独的图像文件star_yellow.png和star_gray.png。但是由于恒星具有固定的高度,因此我们可以轻松地将它们合并为一张图像。这利用了CSS Sprite技术。
现在,由于跨度是嵌套的,因此它们将自动彼此重叠。在默认情况下,当两个跨度的宽度均为80px时,黄色星星会完全遮盖灰色星星。
但是,当我们调整内部跨度的宽度时,黄色星星的宽度会减小,从而露出灰色星星。
在可访问性方面,将浮点数保留在内部跨度中并用隐藏是比较明智的选择text-indent: -9999px
,这样,关闭CSS的人至少会看到浮点数而不是星号。
希望这是有道理的。
现在变得更加紧凑和难以理解!也可以压成一个衬板:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
max-width
)。
如果只需要支持现代浏览器,则可以摆脱:
您只需要将数字转换为class
,例如class='stars-score-50'
。
首先是“渲染”标记的演示:
body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
Within block level elements:
<div><span class="stars-container stars-0">★★★★★</span></div>
<div><span class="stars-container stars-10">★★★★★</span></div>
<div><span class="stars-container stars-20">★★★★★</span></div>
<div><span class="stars-container stars-30">★★★★★</span></div>
<div><span class="stars-container stars-40">★★★★★</span></div>
<div><span class="stars-container stars-50">★★★★★</span></div>
<div><span class="stars-container stars-60">★★★★★</span></div>
<div><span class="stars-container stars-70">★★★★★</span></div>
<div><span class="stars-container stars-80">★★★★★</span></div>
<div><span class="stars-container stars-90">★★★★★</span></div>
<div><span class="stars-container stars-100">★★★★★</span></div>
<p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>
然后是一个使用一小段代码的演示:
$(function() {
function addScore(score, $domElement) {
$("<span class='stars-container'>")
.addClass("stars-" + score.toString())
.text("★★★★★")
.appendTo($domElement);
}
addScore(70, $("#fixture"));
});
body { font-size: 18px; }
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Generated: <div id="fixture"></div>
该解决方案的最大缺点是:
width
在伪元素上设置精确的分数)。要解决此问题,可以轻松调整上面的解决方案。在:before
与:after
位需要成为DOM实际元素(所以我们需要一些JS为)。
后者留给读者练习。
试试这个jQuery助手功能/文件
jquery.Rating.js
//ES5
$.fn.stars = function() {
return $(this).each(function() {
var rating = $(this).data("rating");
var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
$(this).html(fullStar + halfStar + noStar);
});
}
//ES6
$.fn.stars = function() {
return $(this).each(function() {
const rating = $(this).data("rating");
const numStars = $(this).data("numStars");
const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
$(this).html(`${fullStar}${halfStar}${noStar}`);
});
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Star Rating</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/jquery.Rating.js"></script>
<script>
$(function(){
$('.stars').stars();
});
</script>
</head>
<body>
<span class="stars" data-rating="3.5" data-num-stars="5" ></span>
</body>
</html>
我最终完全不使用JS,以避免客户端渲染滞后。为此,我生成了这样的HTML:
<span class="stars" title="{value as decimal}">
<span style="width={value/5*100}%;"/>
</span>
为了帮助实现可访问性,我什至在title属性中添加了原始评分值。
使用没有原型的jQuery,将js代码更新为
$( ".stars" ).each(function() {
// Get the value
var val = $(this).data("rating");
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
我还通过跨度中的data-rating名称添加了data属性。
<span class="stars" data-rating="4" ></span>