五颗星评论效果实现：jquery+css
今天说要做个星星评论的效果，想想不难吧，就试着写下；
通过网上搜索加自己想法，得到的思路是：
首先是排列好五个星星啦，接着则是css建立两个li的class分别表示选取与未选取（这样表述貌似不大对）；
主要是在未确定打分前，鼠标移到那颗星星，前面的跟本星星一起被亮了，其它的继续黯淡；
然后一旦确定点击，该情形将一直保持着直到下一个点击产生才改变亮与暗的情况。不过现在遇到的问题是一旦点击了之后，我还能评零分（没有一颗星星被点亮）么？可以的，不过我还没想出来。= =
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title></title>
<style type="text/css">
ul {
list-style:none;
}
li{
float:left;
width:20px;
background-image:url(image/star1.gif);
}
.no{
float:left;
width:20px;
background-image:url(image/star1.gif);
}
.yes{
float:left;
width:20px;
background-image:url(image/star2.gif);
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var clickId=0;//点击到的星星位置
$("li").mousemove(function(){
if(clickId==0){//如果未点击过，则执行此函数，否则就不用弄了，贪方便了= =
var focusId=$(this).attr("id")/1;//id属性返回的好像不是一个num，所以用这个，不熟
var i=1;
for(;i<=5;i++){
if(i<=focusId){
$("#"+i).removeClass().addClass('yes');
}else{
$("#"+i).removeClass().addClass('no');
}
}
}
});
$("li").click(function(){
var focusId=$(this).attr("id")/1;
if(focusId>=clickId){
var i=clickId+1;
for(;i<=focusId;i++){
$("#"+i).removeClass().addClass('yes');
}
}else{
var i=focusId+1;
for(;i<=clickId;i++){
$("#"+i).removeClass().addClass('no');
}
}
clickId=focusId;
});
$("li").mouseleave(function(){//未有点击时实现鼠标离开则无亮星星
if(clickId==0){
var i=1;
for(;i<=5;i++){
$("#"+i).removeClass().addClass('no');
}
}
});
});
</script>
</head>
<body>
<div id="starAll">
<ul class="stars">
<li class="no" id="1"> </li>
<li class="no" id="2"> </li>
<li class="no" id="3"> </li>
<li class="no" id="4"> </li>
<li class="no" id="5"> </li>
</ul>
</div>
</body>
</html>
贴上代码之后还修改了一点点小重复，
欢迎有才的你们指点，有什么不好或者不给力的地方，麻烦指点一下，也许你有更好的代码呢~
