首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简易的星级评分

简易的星级评分

作者头像
河湾欢儿
发布2018-09-06 17:20:09
9930
发布2018-09-06 17:20:09
举报
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星星评分demo3</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        li{
           list-style: none;
            width: 30px;
            height: 30px;
            float: left;
            background:  url(img/star.gif) no-repeat 0 0;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span></span>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var a=["很差","差","一般","好","很好"];
            var index=null;   
            $("li").hover(function(){
                $(this).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
                $(this).prevAll().css("background-position","0 -28px");
                $("span").html(a[$(this).index()]);//填充相应的文字
            },function(){
                if(index==null){
                    $("li").css("background-position","0 0");
                    $("span").html("");
                }else{
                    $("li").eq(index).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
                    $("li").eq(index).prevAll().css("background-position","0 -28px");
                    $("span").html(a[$(this).index()]);//填充相应的文字
                }


            });
            $("li").click(function(){
                index=$(this).index();//点击的时候记下当前的index
                $(this).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
                $(this).prevAll().css("background-position","0 -28px");
                $("span").html(a[$(this).index()]);//填充相应的文字
            })

        })
    </script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档