javascript - 如何利用JS/CSS实现根据数值显示星星?
伊谢尔伦
伊谢尔伦 2017-04-10 16:07:26
0
13
795

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

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

素材已经准备好了

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

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

모든 응답(13)
Peter_Zhu
<!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>
        <p id="star_con" class="star-vote">
            <span id="add_star" class="add-star"></span>
            <span id="del_star" class="del-star"></span>
        </p>
        <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>
PHPzhong

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

好奇你这个功能上线没0.0

Peter_Zhu

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

小葫芦

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

刘奇

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

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

HTML部分

<p id="startBox">
            <p class="starta"></p>
            <p class="startb"></p>
            <p class="starta"></p>
            <p class="startb"></p>
            <p class="starta"></p>
            <p class="startb"></p>
            <p class="starta"></p>
            <p class="startb"></p>
            <p class="starta"></p>
            <p class="startb"></p>
            <!--<img src="img/hover.png"/>-->
        </p>

css部分

#startBox {
                width: 94px;
                height: 16px;
                background: url(img/bg.png);
                position: relative;
            }
            img {
                position: absolute;
                top: 0;
                left: 0;
            }
            p {
                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>p");
            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");
                }
            });
迷茫

只是做展示的话可以简单一点,利用background-repeat来做可以想要多少个星星展示都可以(又不是七龙珠= =):

html

    <p class="box">
        <p class="star">
        </p>
    </p>

css

    .box{
        width:100px;height:30px;
        background-image:url(./star_grey.png);
    }
    .star{
       width:0px;height:100%;
       background-image:url(./star_yellow.png);
    }

然后接下来需要做的就是根据分数来改变star的宽度就好;

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

伊谢尔伦

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>

高度自己修改下就行了

刘奇

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

巴扎黑

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

Ty80

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿