嗨,我有5星评级系统,我想这样,我可以添加说4.3星而不是4.我怎么会这样做?我目前的代码如下:
ironic_ollin.. 6
您可以重叠2个绝对定位的div.每个都包含所有5颗星.然后顶部div可能有一个溢出:隐藏的div,其中您设置宽度等于百分比(基于评级).
这是一个代码集,我把它放在一起说明了它:http://codepen.io/anon/pen/ogBWwX 代码片段在下面复制以供参考,并包含一些额外的东西,用于演示目的.
HTML:
CSS:
.container{
padding: 15px;
margin: 10px;
}
p{
margin: 10px 0;
}
.flt_left{
float: left;
margin-right: 10px;
position: relative;
/*min-width: 250px;*/
}
#star_box,
.star_bg{
color: #BBD41C;
position: absolute;
margin: 4px 0;
top: 0;
left: 0;
display: table;
}
.glyphicon{
display: table-cell;
padding: 0 0 0 2px;
font-size: 18px;
}
#star_box{
z-index: 2;
}
.star_bg{
color: #555;
}
#star_box .star_limiter{
width:100%;
overflow: hidden;
position: relative;
}
使用Javascript:
function setWidth(perc){
$('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
if(typeof outof == 'undefined') outof = 5;
var percent = Math.round(amt*100/outof);
if(percent > 100) percent = 100;
$('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
setWidth(percent);
}
function setRating(){
var input = parseFloat($('#star_input').val());
var num_stars = $('#star_box .star_limiter .glyphicon-star').length;
if(!isNaN(input)) starToPercent(input, num_stars);
}
$(document).ready(function(){
var star_width = $('#star_box').width();
var star_height = $('#star_box').height();
$('#star_box').css('width',star_width+'px');
$('#star_box .star_limiter').css('height',star_height+'px');
$('#star_box .longbar').css('width',star_width+'px');
$('#setStars').click(setRating);
$('#star_form').submit(function(e){
e.preventDefault();
setRating();
});
});
注意: 重叠的星星看起来不太好,因为你会看到边缘周围的背景星的颜色.因此,如果你摆脱背景恒星并使用纯色,它看起来会更好.与颜色匹配越多,它也越不明显.
我设置了glyphicons的CSS来显示:table-cell,以防止它们包裹并将它们放在一起.恒星之间的空间越大,浮标的结果越不准确.
您可以重叠2个绝对定位的div.每个都包含所有5颗星.然后顶部div可能有一个溢出:隐藏的div,其中您设置宽度等于百分比(基于评级).
这是一个代码集,我把它放在一起说明了它:http://codepen.io/anon/pen/ogBWwX 代码片段在下面复制以供参考,并包含一些额外的东西,用于演示目的.
HTML:
<div class="container">
<div class="flt_left">
<form id="star_form">
<label for="star_input">Stars:</label>
<input type="text" id="star_input" />
<button id="setStars">Set Rating</button>
</form>
</div>
<div class="flt_left">
<div id="star_box">
<div class="star_limiter">
<div class="longbar">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<div class="star_bg">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
</div>
<div ></div>
<p id="rating_data"></p>
</div>