代码改变世界

以jquery为基础的星星评分

2009-09-14 14:59  zhaoyang  阅读(3746)  评论(4)  编辑  收藏  举报

      何谓星星评分呢？它是网络中一种常见的文章评价系统，可以对您感兴趣的文章，视频等等进行打分。还是先看一下运行效果也许您一下就明白了。
      初始状态就是页面载入时的状态，如图1： 

图1

      如果鼠标滑到星星上面他会把气前面的星星变量，比如鼠标滑动到第八个星星，则前8个星星就加上颜色，如图2所示： 

图2

      如果鼠标单击则记录当前用户选择的状态如图2所示，如果鼠标不单击在滑出星星区域则恢复如图1所示。

      首先看一下html代码 这里包含着所有JavaScript代码，具体代码如下所示：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星星投票</title>
<!--引入css文件-->
<link href="pic/css.css" rel="stylesheet" type="text/css" />
<!--引入jquery文件-->
<script src="js/jquery.js"></script>
<script type="text/javascript">

//定义函数记录星星状态
function SaveClass()
{
 var temClassArry = new Array()
 $("#UserStart > li").each(function(i){
 temClassArry[i] = $(this).attr("class");
 })
 return temClassArry;
}
$(document).ready(function(){
 var temparray = SaveClass();

//鼠标滑到星星上
 $("#UserStart > li").mousemove( 
  function(){
   var currentCount=0;
   currentCount = $("#UserStart > li").index($(this)[0])
   $("#UserStart > li").each(function(i){if(i<=currentCount) 
      {
       $(this).removeClass();
       $(this).addClass("on");
      }
      else
      {
       $(this).removeClass();
       $(this).addClass("off");
      }})
  }
 )

//鼠标在星星上点击
 .click(function(){
   temparray = SaveClass();
  })

//鼠标滑出星星上
 .mouseout(function(){
  $("#UserStart > li").each(function(i){
   $(this).removeClass();
   $(this).addClass(temparray[i]);
  })
  })
});
</script>
</head>
<body>
<ul class="star" id="UserStart">
              <li class="on"></li>
              <li class="on"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
              <li class="off"></li>
            </ul>
</body>
</html>

 

还有一个.css文件主要记录样式文件控制星星的样式，具体的css代码如下所示：

@charset "utf-8";
.star li{
 float:left;
 width:25px;
 background:url('sprit1.png') no-repeat 0 -465px;
}
.star li.on{
 float:left;
 width:25px;
 background-position:0 -415px;
}
.star li{
 float:left;
 width:25px;
 cursor:pointer;
}
.star li.off{
 float:left;
 width:25px;
 background-position:0 -490px;
}
源文件下载地址：/Files/studyplay/start.rar