phpstudy集成环境

 首页 > 如何利用JS/CSS实现根据数值显示星星？

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

在下是一个小公司新入坑的程序猿，平时都是代码的干活，这几天前端回老家爬山去了。
但是刚好有前端的需求，需要在今晚完成。无奈不熟悉JS和CSS，整了半天没整出来，搜索的又全是评分功能，只好来提问。

已经从API里边获取到电影的分数，想要实现这样的效果。

素材已经准备好了

这里还有一个接近透明的素材

今晚就要完成上线啊，在线等，谢谢大家了。

准备睡觉了，简单的写了下，基于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");
                }
            });
<!DOCTYPE html>
<html >
    <head>
        <title>Mobile</title>
        <meta charset="utf-8">
        <style>
            .bg{
                display: inline-block;
                width: 93px;
                height: 16px;
                background: url(./bg.png);
            }
            .star{
                display: inline-block;
                left: 0;
                top: 0;
                background: url(./star.png);
                width: 0;
                height: 16px;
            }
        </style>
    </head>
    <body>
        <span class="bg">
            <span class="star" id="star"></span>
        </span>

        <script>
            var star = document.getElementById("star");
            star.style.width = "70%";
        </script>
    </body>
</html>

只是做展示的话可以简单一点,利用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的宽度就好；

注：徒手代码，未测试，只是展示个思路。

你先定义好class，使用js根据数值来设置你要的class就好了

其实这种打分有一种技术难度最低的方案:你不是已经取得了分数么，一般有一般就是，不同分数调用不同素材

<!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>

http://bookshadow.com/weblog/2014/08/16/jquery-raty-star-plugin/就可以实现了，可以看看对应的API接口

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>

高度自己修改下就行了

其实那个全透明的应该作为背景，然后那个满分星星的可以根据评分的高低适当的遮挡一部分来达到效果

用背景图，把接近透明的放后面，然后有颜色的覆盖上去，然后就可以调节有颜色的背景图显示宽度来控制分数。

http://www.radioactivethinking.com/rateit/example/example.htm 之前用过的一个插件

好奇你这个功能上线没0.0

把你的透明素材反过来，星星是透明的，边上是不透明的，然后后面放一个橙色的div，宽度为score/10*100%,再后面放一个灰色的div，宽度100%，这样可以实现连续的星星分数，比如7.3。

判断根据分数的不同显示星星的图片长度不同应该是可行的吧？ 但是如果需要手动评分的话就去看看楼上的回答吧

【热门文章】
【热门文章】