五颗星评论效果实现: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">&nbsp;</li>
<li class="no" id="2">&nbsp;</li>
<li class="no" id="3">&nbsp;</li>
<li class="no" id="4">&nbsp;</li>
<li class="no" id="5">&nbsp;</li>
</ul>
</div>
</body>
</html>


贴上代码之后还修改了一点点小重复,

欢迎有才的你们指点,有什么不好或者不给力的地方,麻烦指点一下,也许你有更好的代码呢~

posted @ 2011-10-29 21:09  Dont  阅读(...)  评论(...编辑  收藏