关注前端开发微信微信号web007007

【jquery】星级评分

作者 管理员 发布时间 2012-06-19 02:18 文章分类 前端资源 文章评论 抢沙发 阅读次数

js星级评分,以下是代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星级评价-web前端开发网</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
#star{ width:240px; height:16px; line-height:16px; position:absolute; top:45%; left:50%; margin:-10px 0 0 -110px; font-family:"微软雅黑";}
#star h3{ font-size:14px; float:left;}
#star strong{ float:left; margin-left:5px; color:#F00; font-size:14px; }
#star ul{ float:left;}
#star li{ float:left; position:relative; padding-right:3px; width:16px; height:16px;}
#star li a{ display:inline-block; background:url(img/starG.gif) no-repeat; width:16px; height:16px;}
#star li span{ font-size:12px; color:#F00; position:absolute; top:-18px; left:-2px; width:28px; display:none;}
#star li.on a{ background:url(img/starP.gif) no-repeat;}
</style>
<body>
<script>
$(document).ready(function() {
var $star = $("#star");
var $li = $star.find("li");
var $strong = $star.find("strong");
var $span = $star.find("span");
var i = iScore = iStar = 0;

$li.hover(function()
{
var index = $(this).index()+1;
$span.css("display","none");
$(this).find("span").css("display","block");
curPoint(index);
},
function()
{
$span.css("display","none");
curPoint();
})

$li.click(function()
{
var index = $(this).index()+1;
var sText = $(this).find("span").text();
iStar = $(this).index()+1;
$strong.text(sText);
})

function curPoint(pNum)
{
if(pNum){
iScore = pNum;
}else{
iScore = iStar;
}
for (i = 0; i < $li.length; i++)
{
if(i < iScore){
$li.eq(i).addClass("on");
}else{
$li.eq(i).removeClass("on");
}
}
}
});
</script>
<div id="star">
<h3>点击星星打分:</h3>

<ul>
<li><a href="javascript:void(0)"></a><span>1分</span></li>
<li><a href="javascript:void(0)"></a><span>2分</span></li>
<li><a href="javascript:void(0)"></a><span>3分</span></li>
<li><a href="javascript:void(0)"></a><span>4分</span></li>
<li><a href="javascript:void(0)"></a><span>5分</span></li>

</ul>
<strong></strong>
</div>
</body>
</html>

查看地址:【jquery】星级评分

下载地址:【jquery】星级评分
下载密码:www.web92.net

本文固定链接: http://www.web92.net/422.html | WEB前端开发

该日志由 于2012年06月19日发表在 前端资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 【jquery】星级评分 | WEB前端开发
关键字: