如何利用JS/CSS实现根据数值显示星星？
在下是一个小公司新入坑的程序猿，平时都是代码的干活，这几天前端回老家爬山去了。
但是刚好有前端的需求，需要在今晚完成。无奈不熟悉JS和CSS，整了半天没整出来，搜索的又全是评分功能，只好来提问。
已经从API里边获取到电影的分数，想要实现这样的效果。
素材已经准备好了
这里还有一个接近透明的素材
今晚就要完成上线啊，在线等，谢谢大家了。
复活的翅膀
9 years, 4 months ago
Answers
css
.stars{display: inline-block;height: 1.15rem;width:7.6rem;margin-right:.4rem;background: url(../images/stars_nor.png) no-repeat top left / auto 100%;vertical-align:baseline;}
.stars > span {display:block;height: 1.15rem;background: url(../images/stars_cur.png) no-repeat top left / auto 100%;vertical-align: top;}
html
<label class="stars">
<span style="width:70%;"></span>
</label>
高度自己修改下就行了
此ID被屏蔽
answered 9 years, 4 months ago
只是做展示的话可以简单一点,利用 background-repeat 来做可以想要多少个星星展示都可以（又不是七龙珠= =）：
html
<div class="box">
<div class="star">
</div>
</div>
css
.box{
width:100px;height:30px;
background-image:url(./star_grey.png);
}
.star{
width:0px;height:100%;
background-image:url(./star_yellow.png);
}
然后接下来需要做的就是根据分数来改变star的宽度就好；
注：徒手代码，未测试，只是展示个思路。
ハルヒ凉宫
answered 9 years, 4 months ago
准备睡觉了，简单的写了下，基于jquery，注释也没怎么写，应该能看懂。
重新看了下需求，好像有点不一样，原理是一样的。
HTML部分
<div id="startBox">
<div class="starta"></div>
<div class="startb"></div>
<div class="starta"></div>
<div class="startb"></div>
<div class="starta"></div>
<div class="startb"></div>
<div class="starta"></div>
<div class="startb"></div>
<div class="starta"></div>
<div class="startb"></div>
<!--<img src="img/hover.png"/>-->
</div>
css部分
#startBox {
width: 94px;
height: 16px;
background: url(img/bg.png);
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
div {
width: 9.4px;
height: 100%;
float: left;
z-index: 2;
background: url(img/hover.png);
}
.startb {
background-position: 101px;
}
.starta,
.startb {
opacity: 0;
}
.starta.show,
.startb.show {
opacity: 1;
}
JS部分
var clickState = false;//是否点击了星星
var oStrat = $("#startBox>div");
oStrat.hover(function() {
var startIndex = $(this).index();
if (startIndex == 0) {
$(this).eq(startIndex).addClass("show");
if($(this).next().hasClass("show")){
$(this).next().removeClass("show");
}
} else {
var prevState = $(this).prev().hasClass("show");
var nextState = $(this).next().hasClass("show");
console.log(prevState);
if (prevState&&nextState) {
$(this).next().removeClass("show");
}
else if(prevState){
$(this).addClass("show");
}
}
});
oStrat.click(function(){
clickState=true;
});
$("#startBox").mouseleave(function(){
if(clickState){
clickState=false;
}
else{
oStrat.removeClass("show");
}
});
fnashu
answered 9 years, 4 months ago
http://www.radioactivethinking.com/rateit/example/example.htm 之前用过的一个插件
好奇你这个功能上线没0.0
终于注册成功了
answered 9 years, 4 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.star-vote{
width:120px;
height:20px;
position:relative;
overflow:hidden;
}
.star-vote>span{
position:absolute;
width:120px;
height:20px;
background-size:cover;
background-repeat:no-repeat;
left:0px;
top:0px;
}
.star-vote>.add-star{
background-image:url("star.png(换成对应的有颜色星星的路径)");
}
.star-vote>.del-star{
background-image:url("star-trans.png(换成透明星星的路径)");
background-color:white;
}
</style>
</head>
<body>
<div id="star_con" class="star-vote">
<span id="add_star" class="add-star"></span>
<span id="del_star" class="del-star"></span>
</div>
<script>
window.onload=showStar(7);
//n表示后台获取的星数
function showStar(n){
var con_wid=document.getElementById("star_con").offsetWidth;
var del_star=document.getElementById("del_star");
console.log(con_wid);
//透明星星移动的像素
var del_move=(n*con_wid)/10;
del_star.style.backgroundPosition=-del_move+"px 0px";
del_star.style.left=del_move+"px";
}
</script>
</body>
</html>
相对1的⑥酱
answered 9 years, 4 months ago