html显示宇宙星星,如何利用JS/CSS实现根据数值显示星星？

准备睡觉了，简单的写了下，基于jquery，注释也没怎么写，应该能看懂。

重新看了下需求，好像有点不一样，原理是一样的。

HTML部分

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");

}

});