五角星动态评分效果
head中的内容：
<head>
<style type="text/css">ul {
list-style-type: none;
}
#star {
position: relative;
width: 600px;
margin: 10px auto;
}
#star ul,#star span {
float: left;
display: inline;
height: 20px;
line-height: 19px;
}
#star ul {
margin: 0 10px;
}
#pf li{
float: left;
height:20px;
width: 20px;
text-indent: -9999px;
background-image:url("../img/star.png") ;
background-position:1px 20px;
}
#star li {
float: left;
width: 30px;
cursor: pointer;
text-indent: -9999px;
background: url(../img/star.png) no-repeat;
}
#star strong {
color: #f60;
padding-left: 10px;
}
#star li.on {
background-position: 0 -28px;
}
#star p {
position: absolute;
top: 20px;
width: 159px;
height: 60px;
display: none;
background: url(../img/icon.gif) no-repeat;
padding: 7px 10px 0;
}
#star p em {
color: #f60;
display: block;
font-style: normal;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css"href="../css/bootstrap-responsive.min.css">
<link rel="shortcut icon" href="../favicon.ico">
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
//星级评分
window.onload = function ()
{
var oStar = document.getElementById("star");
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = [
"很不满意|老师根本不能帮我解决问题",
"不满意|老师只解决了部分问题",
"一般|老师基本帮我解决了所有问题,不过没太懂",
"满意|老师帮我解决了所有问题,非常详细",
"非常满意|老师很及时的帮我解决了所有问题,非常满意"
];
for (i = 1; i <= aLi.length; i++)
{
aLi[i - 1].index = i;
//鼠标移过显示分数
aLi[i - 1].onmouseover = function ()
{
fnPoint(this.index);
//浮动层显示
oP.style.display = "block";
//计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
//匹配浮动层文字内容
oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
};
//鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function ()
{
fnPoint();
//关闭浮动层
oP.style.display = "none"
};
//点击后进行评分处理
aLi[i - 1].onclick = function ()
{
iStar = this.index;
alert(iStar);
document.getElementById("score").value=iStar;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
}
}
//评分处理
function fnPoint(iArg)
{
//分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
}
};
function subm(){
var f = window.confirm("是否确认提交");
if(f){
var envalute = document.getElementById("evaluate");
$("#textareaValue").val(editor.html())
if(envalute.style.display!='none'){
alert('提交评价内容')
var form = document.getElementById("for")
form.action="http://www.baidu.com";
form.submit();
}
var accusation = document.getElementById("accusation");
if(accusation.style.display!='none'){
alert('提交举报内容')
var form = document.getElementById("for")
form.action="http://www.123.com";
form.submit();
}
var update = document.getElementById("update");
if(update.style.display!='none'){
alert('提交修改内容')
var form = document.getElementById("for")
form.action="http://www.google.com";
//form.submit();
}
}else{
return false;
}
}
</script>
</head>
body中的星星内容：
<tr>
<td style="width: 230px;" >
<div style="font-size: 18px; margin-left: 100px;">分数</div>
</td>
<td>
<!-- 星星展示位 -->
<div id="pf" style="font-size: 15px; margin-left: 0px">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div><br/>
<strong style="color: red; margin-left: 27px">
3分
</strong>
老师没有很快的解答我的问题!
</div>
<!-- 评分星星位 -->
<div id="star" >
<ul style="margin-left: 25px">
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div>
</td>
</tr>
body中 form 表单中的 内容：
<form class="form-horizontal form-actions" action="#" method="post"
id="for" οnsubmit="return subm()">
<input name="评分分值保存" value="" id="score" type="hidden"/>
<div id="e_text" style="margin-left: 10%; display:none;">
<textarea id="textarea" name="content" style="width:700px; height:150px; visibility:hidden;" id="textarea"></textarea>
<input type="hidden" id="textareaValue" name="textareaValue"/>
</div>
<!-- 页面上三个按钮可以没有效果,但是三个按钮必须显示-->
<!-- 如果想让按钮失去效果 请在标签内加入 name="validate" -->
<input type="button" class="btn" value="评价" id="evaluate"style="margin-left: 10%;width: 10%;display: inline;" /> <input
type="button" class="btn" value="举报" name="validate" οnclick="alert('已经举报不能再举报了')" id="accusation"style="margin-left: 5%;width: 10%; display: inline;" /> <input
type="button" class="btn" value="修改" id="update"
style="margin-left: 5%;width:10%" />
<!-- 点击提交修改提交表单路径 -->
<input type="button" value="提交" class="btn" id="submit"
style="display: none; margin-left: 36%" οnclick="subm()" /> <input
type="reset" value="重置" class="btn" id="reset"
style="display: none; margin-left: 5%" />
</form>