Jquery五角星评分效果
采用Jq Css制作的五角星评分效果，主要是利用CSS的background-image以及background-position来调整我们的背景图片，以及Jq来选择要变化的元素。代码非常简单，只有几行。
效果：
html代码：
<div class="formItemDiff formItemDiffFirst"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <div class="formItemDiff"></div> <p id="pointP" style="float:left; margin-left:20px;"></p>
css代码：
#typeone {
width:
}
.formItemDiff {
width: 20px;
height: 20px;
background-image: url(diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
.formItemDiffFirst {
margin-left: 20px;
}
jq代码：
$(document).ready(function(e) {
$(".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+"分");
});
});
查看示例：wuxing
跟多阅读：