程序员人生 网站导航

以jQuery为基础的星星评分效果(附源码)

栏目:jquery时间:2013-12-31 08:26:06

  何谓星星评分呢?它是网络中一种常见的文章评价系统,可以对您感兴趣的文章,视频等等进行打分。还是先看一下运行效果也许您一下就明白了。

  初始状态就是页面载入时的状态,如图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;
}

  源文件下载:start_quote.rar

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐