以jQuery为基础的星星评分效果(附源码)
来源：程序员人生 发布时间：2013-12-31 08:26:06 阅读次数：4535次
何谓星星评分呢?它是网络中一种常见的文章评价系统，可以对您感兴趣的文章，视频等等进行打分。还是先看一下运行效果也许您一下就明白了。
初始状态就是页面载入时的状态，如图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
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
