星星点评

最新推荐文章于 2022-02-21 16:40:20 发布

KnowNothingLikeEat

最新推荐文章于 2022-02-21 16:40:20 发布

阅读量402

点赞数 1

分类专栏： Html

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<title>左右布局－左边定宽，右边不定宽；右在上，左在下</title>
<link rel="stylesheet" type="text/css" href="layout3.css" />
<style type="text/css">
body {
color: #333;
font: normal normal normal 12px/1.5 Arial, 宋体, sans-serif;
}

.block {
clear: both;
margin-bottom: 20px;
margin-bottom: 10px;
zoom: 1;
padding: 5px 11px;
border: 1px solid #F5EEE8;
padding-top: 10px;
margin: 0 10px 0;
padding-bottom: 20px;
border-bottom: 1px dashed #E4E4E4;
margin: 10px auto;
padding: 0;
border: none;
}

.label {
float: right;
margin-right: 10px;
text-align: right;
font-weight: normal;
font-style: normal;
width: 94px;
}

em {
margin-right: 5px;
color: #c00;
font-weight: bold;
font-style: normal;
margin-left: 2px;
}

.note {
color: #999;
}

.form-textarea {
float: left;
font-family: Tahoma, Geneva, sans-serif;
margin-right: 5px;
width: 598px;
zoom: 1;
font-family: inherit;
font-size: 100%;
-webkit-appearance: textarea;
-webkit-box-orient: vertical;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: white;
border: 1px solid;
cursor: auto;
padding: 2px;
resize: auto;
white-space: pre-wrap;
word-wrap: break-word;
}

.rating-wrap {
display: inline-block;
float: left;
position: relative;
top: -2px;
width: 89px;
height: 20px;
margin-right: 5px;
padding: 4px 0 0 5px;
border: 1px solid #EFE0D7;
background: #FFF9F1;
z-index: 0;
}

.rating-wrap ul, .rating-wrap a:hover {
background: url("Content/Image/star-yellow.png") 50% 0 repeat;
}

.rating-wrap ul {
-webkit-padding-start: 40px;
display: block;
list-style-type: disc;
margin: 1em 0px;
border: 0px;
margin: 0px;
outline: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 85px;
height: 16px;
background-position: 0 -90px;
z-index: 10;
}

.rating-wrap li {
display: inline;
}

.rating-wrap a {
zoom: 1;
position: absolute;
left: 0;
top: 0;
display: block;
height: 16px;
}

.rating-wrap .five-stars {
width: 84px;
z-index: 10;
background-position: 0 0px;
}

.rating-wrap .four-stars {
width: 68px;
z-index: 20;
background-position: 0 -18px;
}

.rating-wrap .three-stars {
width: 51px;
z-index: 30;
background-position: 0 -36px;
}

.rating-wrap .two-stars {
width: 34px;
z-index: 40;
background-position: 0 -54px;
}

.rating-wrap .one-star {
width: 17px;
z-index: 50;
background-position: 0 -72px;
}

.active-hint {
color: #C00;
float: left;
padding-top: 2px;
font-weight: normal;
font-style: normal;
}
</style>
<script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<table class="block">
<tr>
<td>
<span class="label">总体评价<em>*</em>:</span>
</td>
<td>
<div class="rating-wrap">
<ul class="rating-wrap-ul" οnmοuseοut="onUlMouseOut()" οnmοuseοver="onUlMouseOver()">
<li><a class="one-star" title="很差" data-hint="很差" href="javascript:clickStar(1);" οnmοuseοver="onLiMouseOver(1)" οnmοuseοut="onLiMouseOut()"></a></li>
<li><a class="two-stars" title="差" data-hint="差" href="javascript:clickStar(2);" οnmοuseοver="onLiMouseOver(2)" οnmοuseοut="onLiMouseOut()"></a></li>
<li><a class="three-stars" title="还行" data-hint="还行" href="javascript:clickStar(3);" οnmοuseοver="onLiMouseOver(3)" οnmοuseοut="onLiMouseOut()"></a></li>
<li><a class="four-stars" title="好" data-hint="好" href="javascript:clickStar(4);" οnmοuseοver="onLiMouseOver(4)" οnmοuseοut="onLiMouseOut()"></a></li>
<li><a class="five-stars" title="很好" data-hint="很好" href="javascript:clickStar(5);" οnmοuseοver="onLiMouseOver(5)" οnmοuseοut="onLiMouseOut()"></a></li>
</ul>
</div>
<span id="ratingText" class="active-hint" innertext=""></span>
</td>
</tr>
<tr>
<td>
<span class="label">评价<em>*</em>:</span>
</td>
<td>
<span class="note">(50-2000个字)</span>
<span id="textCount" class="note" innertext=""></span>
</td>
</tr>
<tr>
<td></td>
<td>
<textarea name="appraiseText" id="appraiseText" class="form-content-block form-textarea" rows="12"></textarea>
</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 () {
$("#appraiseText").bind("keydown", function () {
var count = $("#appraiseText").val().length;
if (count <= 200) {
$("#textCount").html(" 还能输入<font color='green'><b>" + (200 - count) + "</b></font>个字");
} else {
$("#textCount").html(" 已超出<font color='red'><b>" + (count - 200) + "</b></font>个字");
}
});
});

var starValue = 0;
function onUlMouseOut() {
var y = -90 + starValue * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position": position
});
}

function onUlMouseOver() {
$(".rating-wrap-ul").css({
"background-position": "0 -90px"
});
}
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() {
onLiMouseOver(starValue);
}
function clickStar(grade) {
starValue = grade;
var y = -90 + grade * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position": position
});
}
</script>