初步星型评分实现

最新推荐文章于 2022-05-27 22:22:00 发布

fly18702787810

最新推荐文章于 2022-05-27 22:22:00 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/fly18702787810/article/details/73551369

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding:0;
    }
    ul,ol{
        list-style-type: none;
    }
    ul li{
        width:35px;
        height:35px;
        display: inline-block;
        cursor:pointer;
    }
    ul{
        margin:100px auto;
        width:200px;
        height:35px;
    }
    .star{
        background:url('../image/iVPGGC.png') no-repeat;
    }
</style>
<body>
<ul id="rating">
    <li class="star" title="很差"></li>
    <li class="star" title="差"></li>
    <li class="star" title="一般"></li>
    <li class="star" title="好"></li>
    <li class="star" title="很好"></li>
</ul>
<ul id="rating2">
    <li class="star" title="很差"></li>
    <li class="star" title="差"></li>
    <li class="star" title="一般"></li>
    <li class="star" title="好"></li>
    <li class="star" title="很好"></li>
</ul>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var test = (function(){
        var lightingStar = function($star,num){
            $star.each(function(index){
                if(index<num){     //小于2的时候点亮
                    $(this).css("background-position","0 -40px");
                }else{
                    $(this).css("background-position","0 0");
                }
            })
        }
        var init = function(el,num){
            var $rating = $(el);
            var $star = $rating.find(".star");
            lightingStar($star,num);
            $rating.on("mouseover",".star",function(){   //解决每个元素都绑定事件的问题，采用事件委托
                lightingStar($star, $(this).index()+1);
            }).on("click",".star",function(){
                num =$(this).index()+1; //记录当前电铃个数
            }).on("mouseout",function(){
                lightingStar($star,num);
            })

        }
        $.fn.extend({
            rating:function(num){
                return this.each(function(){
                    init(this,num)
                })
            }
        })
        return {
            init:init
        }
    })()
    $("#rating").rating(3);
    $("#rating2").rating(4);


</script>
</html>

fly18702787810

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步星型评分实现

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>style> *{ margin: 0; padding:0; } ul,ol{ list-style-type: none; } ul li{
复制链接

扫一扫