星星选择样式

最新推荐文章于 2023-07-02 10:32:27 发布

KnowNothingLikeEat

最新推荐文章于 2023-07-02 10:32:27 发布

阅读量497

点赞数

分类专栏： Html

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>左右布局－左边定宽，右边不定宽；右在上，左在下</title>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<table class="block">
<tr>
<td>
<span class="ks-simplestar">
<img src="http://img.alicdn.com/tps/i3/T1eMt9XclyXXXXXXXX-19-19.png" οnmοuseοver="onLiMouseOver(1)" οnmοuseοut="onLiMouseOut(1)" />
<img src="http://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png" οnmοuseοver="onLiMouseOver(2)" οnmοuseοut="onLiMouseOut(2)" />
<img src="http://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png" οnmοuseοver="onLiMouseOver(3)" οnmοuseοut="onLiMouseOut(3)" />
<img src="http://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png" οnmοuseοver="onLiMouseOver(4)" οnmοuseοut="onLiMouseOut(4)" />
<img src="http://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png" οnmοuseοver="onLiMouseOver(5)" οnmοuseοut="onLiMouseOut(5)" />

</span>
<span id="ratingText" class="active-hint" innertext=""></span>
</td>
</tr>

<tr>
<td></td>
<td align="right">
<input type="button" value="提交" οnclick="submitAppraise()">
<input type="button" value="关闭" οnclick=" ">
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function ($) {
document.getElementById("ratingText").innerHTML = "1";
$(".ks-simplestar img").mouseover(function () {
var index = $(this).index()+1;
$(".ks-simplestar img:lt(" + index + ")").attr("src", "http://img.alicdn.com/tps/i3/T1eMt9XclyXXXXXXXX-19-19.png");
index = index - 1;
$(".ks-simplestar img:gt(" + index + ")").attr("src", "http://img.alicdn.com/tps/i2/T1j_SkXl0fXXXXXXXX-19-19.png");
});
});

var starValue = 0;

function onLiMouseOver(grade) {
switch (grade) {
case 1: document.getElementById("ratingText").innerHTML = "1"; break;
case 2: document.getElementById("ratingText").innerHTML = "2"; break;
case 3: document.getElementById("ratingText").innerHTML = "3"; break;
case 4: document.getElementById("ratingText").innerHTML = "4"; break;
case 5: document.getElementById("ratingText").innerHTML = "5"; break;
default: document.getElementById("ratingText").innerHTML = "";
}
}
function onLiMouseOut(grade) {
onLiMouseOver(grade);
}
</script>