09/23
2016
给文章或其他作品打分是很常见的功能，不过我之前做的网站里都没用到这个功能，于是今天自己写了个demo。
可以设置任意颗星星数；
可以设置一开始显示评分还是不显示评分；
每个人只能打分一次。
这个demo一星一分。
代码如下：
<div class="rate" data-value="0">
<i title="1分"></i><i title="2分"></i><i title="3分"></i><i title="4分"></i><i title="5分"></i><i title="6分"></i><i title="7分"></i><i title="8分"></i><i title="9分"></i><i title="10分"></i>
</div>
<style type="text/css">
.rate{height: 26px;}
.rate i{display: inline-block;width: 26px;height: 100%;background-image: url(/f/pixiv_star.png);cursor: pointer;background-position: 0 0;}
.rate .bgNone{background-position: 0px 0px;}
.rate .bgHover{background-position: -26px 0px;}
.rate .bgSure{background-position: -52px 0px;}
.cursordef i{cursor:default;}
</style>
<script src="ratev0.1.js"></script>
外层div有个data-value属性，表示预设评分。设置为0则表示不显示这幅作品的评分，星星都不亮；大于0则为当前得分，并且会亮起对应的星星。
里面的每个i标签是一个星星，数量可以随意调整。
css样式里设置宽高来布局，并设置背景图片。把三种星星样式做到一张图片上，使用背景定位让三个样式显示三种背景图片。分别是bgNone（这个星星不亮的图案），bgHover（鼠标经过时星星亮起来），bgSure（这个星星有评分）。
当用户点击了一个星星后，会产生评分，之后就不能再点击了。
