<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"
>
<HTML xmlns=
"http://www.w3.org/1999/xhtml"
>
<HEAD>
<TITLE>jquery点评网星星评论</TITLE>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
b,em,i{ font-style:normal; font-weight:normal;}
h1,h2,h3,h4{ font-size:14px;}
h5{ font-size:12px;}
h6{ font-size:12px;font-style:normal;}
.fl{ float: left; display: inline;}
.box_163css{ width: 480px;margin:20px auto; height: 30px;}
.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}
.star_ul{background: url(http:
.star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }
.star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.star_ul li .active-star{background: url(http:
.star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}
.star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}
.star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}
.star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}
.star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}
.s_result{ padding: 6px 0 0 5px; }
.square_ul{background: url(http:
.square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }
.square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.square_ul li .active-square{background: url(http:
.square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}
.square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}
.square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}
.square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}
.square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}
.s_result_square{padding: 4px 0 0 9px; }
</style>
<SCRIPT src=
"jquery-1.6.2.min.js"
type=text/javascript></SCRIPT>
</HEAD>
<script type=
"text/javascript"
>
$(
function
(){
$(
'.star_ul a'
).hover(
function
(){$(this).addClass(
'active-star'
);$(
'.s_result'
).css(
'color'
,
'#c00'
).html($(this).attr(
'title'
))},
function
(){$(this).removeClass(
'active-star'
);$(
'.s_result'
).css(
'color'
,
'#333'
).html(
'请打分'
)});
$(
'.star_ul a'
).click(
function
(){
alert($(
'.s_result'
).html());
})
$(
'.square_ul a'
).hover(
function
(){$(this).addClass(
'active-square'
);$(this).parents(
'.box_163css'
).find(
'.s_result_square'
).css(
'color'
,
'#c00'
).html($(this).attr(
'title'
))},
function
(){$(this).removeClass(
'active-square'
);$(this).parents(
'.box_163css'
).find(
'.s_result_square'
).css(
'color'
,
'#333'
).html(
'请打分'
)});
$(
'.square_ul a'
).click(
function
(){
alert($(this).parents(
'.box_163css'
).find(
'.s_result_square'
).html());
})
})
</script>
<BODY>
<div
class
=
"box_163css"
>
<span
class
=
"s_name"
>总体评价:</span>
<ul
class
=
"star_ul fl"
>
<li><a
class
=
"one-star"
title=
"很差"
href=
"#"
></a></li>
<li><a
class
=
"two-star"
title=
"差"
href=
"#"
></a></li>
<li><a
class
=
"three-star"
title=
"还行"
href=
"#"
></a></li>
<li><a
class
=
"four-star"
title=
"好"
href=
"#"
></a></li>
<li><a
class
=
"five-star"
title=
"很好"
href=
"#"
></a></li>
</ul>
<span
class
=
"s_result fl"
>请打分</span>
</div>
<div
class
=
"box_163css"
>
<span
class
=
"s_name"
>口味:</span>
<ul
class
=
"square_ul fl"
>
<li><a
class
=
"square-1"
title=
"差"
href=
"#"
></a></li>
<li><a
class
=
"square-2"
title=
"一般"
href=
"#"
></a></li>
<li><a
class
=
"square-3"
title=
"好"
href=
"#"
></a></li>
<li><a
class
=
"square-4"
title=
"很好"
href=
"#"
></a></li>
<li><a
class
=
"square-5"
title=
"非常好"
href=
"#"
></a></li>
</ul>
<span
class
=
"s_result_square fl"
>请打分</span>
</div>
<div
class
=
"box_163css"
>
<span
class
=
"s_name"
>环境:</span>
<ul
class
=
"square_ul fl"
>
<li><a
class
=
"square-1"
title=
"差"
href=
"#"
></a></li>
<li><a
class
=
"square-2"
title=
"一般"
href=
"#"
></a></li>
<li><a
class
=
"square-3"
title=
"好"
href=
"#"
></a></li>
<li><a
class
=
"square-4"
title=
"很好"
href=
"#"
></a></li>
<li><a
class
=
"square-5"
title=
"非常好"
href=
"#"
></a></li>
</ul>
<span
class
=
"s_result_square fl"
>请打分</span>
</div>
<div style=
"text-align:center;clear:both"
>
</div>
</BODY>
</HTML>