以jquery为基础的星星评分
2009-09-14 14:59 zhaoyang 阅读(3762) 评论(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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述