星级评分原理和实现（上）_技术笔记

慕丝3347361 2018-07-24

那个点亮星星的函数不是很懂

1赞 · 0采集

慕粉2019533272 2018-05-28

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>星级评分</title>
    <style>
        body,ul,li{
            padding: 0;
            margin: 0;
        }
        li{
            list-style-type: none;
        }
        .rating{
            width: 140px;
            height: 27px;
            margin:100px;
        }
        .rating-item{
            float:left;
            width: 28px;
            height: 27px;
            background: url(images/xx.png)no-repeat;
            background-position:0 -27px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="rating" id="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script>
        var num=2;
        var $rating=$("#rating");
        var $item=$rating.find(".rating-item");

        // 电亮
        var lightOn=function(num){
            $item.each(function(index){
                if(index < num){
                    $(this).css("backgroundPosition","0 0");
                }else{
                    $(this).css("backgroundPosition","0 -27px");
                }
            })
        };

        // 初始化
        lightOn(num);

        // 绑定事件

        $item.on('mouseover', function(){
            lightOn($(this).index()+1);
        }).on("click",function(){
            num=$(this).index()+1;
        });
        $rating.on('mouseout',function(){
            lightOn(num);
        });
    </script>
</body>
</html>

1赞 · 0采集

彈指 2018-04-18

var num = 2,
$rating = $("#rating"),
$item = $rating.find(".rating-item");

//点亮
var lightOn = function(num) {
//num是要点亮的星星数
$item.each(function(index) {
//
if(index < num) {
$(this).css("background-position", "0 -40px");
//".rating-item"==this
} else {
$(this).css("background-position", "0 0");
}
});
}
//初始化
lightOn(num);

//事件绑定
$item.on('mouseover',function(){
//鼠标移上去所指星星亮起
lightOn($(this).index()+1);
}).on('click',function(){

num=$(this).index()+1;
//此时num改变为当前点击的星星数
});
//给父元素添加moseout事件。移出的时候点亮当前的num数
$rating.on('mouseout',function(){
lightOn(num);
});

2赞 · 2采集
慕瓜5189485 2017-08-09

$(this).css("background-position", "0 -36px"); $(this).animate({height:"300px"});

0赞 · 1采集
慕粉3181705 2017-07-08

重要的

截图
0赞 · 1采集
慕哥0421799 2017-06-17

html

截图
0赞 · 1采集
刀锋少年 2017-05-26

var num=2, # //点亮 var lightOn=function(num){ $('#rating').find('.rating-item').each(function(index){ if(index<num){ $(this).css('background-position','0 -26px'); }else{ $(this).css('background-position','0 0'); } } }); }

0赞 · 0采集

数据加载中...