五颗星评论效果实现：jquery+css

最新推荐文章于 2024-09-05 12:51:44 发布

weixin_30576859

最新推荐文章于 2024-09-05 12:51:44 发布

阅读量233

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/dont27/archive/2011/10/29/2228864.html

版权

今天说要做个星星评论的效果，想想不难吧，就试着写下；

通过网上搜索加自己想法，得到的思路是：

首先是排列好五个星星啦，接着则是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>