Jquery五角星评分效果

采用Jq Css制做的五角星评分效果,主要是利用CSS的background-image以及background-position来调整咱们的背景图片,以及Jq来选择要变化的元素。代码很是简单,只有几行。 css

Jquery五角星评分-彭亚欧我的博客代码中心

Jq: html

$(".formItemDiff").hover(function() {
                $(this).css("background-position", "0px -555px");
                $(this).prevAll().css("background-position", "0px -555px");
                $(this).nextAll().css("background-position", "0px -575px");
             
                $("#pointP").html($(this).prevAll().length 1 "分");
            });
    });

CSS: this

.formItemDiff {
    width: 20px;
    height: 20px;
    background-image: url(http://www.pengyaou.com/food/Images/diff.png);
    background-position: 0px -575px;
    float: left;
    margin-top: 15px;
}
相关文章
相关标签/搜索