2. [图片] 2.png
<html>
<title>JQuery星星评级 http:
//meego123.net/</title>
<head>
<script src=
"jquery-1.3.1.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
var
ltupper=[
"一"
,
"二"
,
"三"
,
"四"
,
"五"
];
$(document).ready(
function
(){
$(
'.star_rating li a'
).each(
function
(){
$(
this
).click(
function
(){
var
lt=getStars($(
this
).attr(
'class'
));
//通过类名判断星星数
$(
'#stars'
).val(lt);
$(
'#selectStars'
).text(ltupper[lt-1]+
'星'
);
$(
'.star_rating li a'
).slice(0,lt).css({
'background'
:
'url(images/yellow.jpg)'
});
$(
'.star_rating li a'
).slice(lt,5).css({
'background'
:
'url(images/while.jpg)'
});
})
})
$(
'.star_rating li a'
).hover(
function
(){
var
lt=getStars($(
this
).attr(
'class'
));
$(
'.star_rating li a'
).slice(0,lt).css({
'background'
:
'url(images/yellow.jpg)'
});
$(
'.star_rating li a'
).slice(lt,5).css({
'background'
:
'url(images/while.jpg)'
});
$(
'#selectStars'
).text(ltupper[lt-1]+
'星'
);
},
function
(){
var
lt=Number($(
'#stars'
).val());
if
(lt==
""
){
$(
'#selectStars'
).text(
'(最高为5星)'
);
}
else
{
$(
'#selectStars'
).text(ltupper[lt-1]+
'星'
);
}
$(
'.star_rating li a'
).slice(0,lt).css({
'background'
:
'url(images/yellow.jpg)'
});
$(
'.star_rating li a'
).slice(lt,5).css({
'background'
:
'url(images/while.jpg)'
});
})
})
//通过类名判断星星数
function
getStars(stars){
var
re=1;
switch
(stars){
case
'one_star'
:re=1;
break
;
case
'two_stars'
:re=2;
break
;
case
'three_stars'
:re=3;
break
;
case
'four_stars'
:re=4;
break
;
case
'five_stars'
:re=5;
break
;
}
return
re;
}
</script>
<style type=
"text/css"
>
<!--
.star_rating {float:left;display:block;list-style:none;margin:-1px 0 0 -1px; padding:0; width:80px; height:16px; position:relative; background:url(images/white.jpg) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:16px;height:16px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(images/yellow.jpg) 0 16px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:16px;}
.star_rating a.two_stars{left:16px;}
.star_rating a.two_stars:hover{width:32px;}
.star_rating a.three_stars{left:32px;}
.star_rating a.three_stars:hover{width:48px;}
.star_rating a.four_stars{left:48px;}
.star_rating a.four_stars:hover{width:64px;}
.star_rating a.five_stars{left:64px;}
.star_rating a.five_stars:hover{width:80px;}
-->
</style>
</head>
<body>
<div style=
"display:block;float:left;width:100px;"
><span>*</span> 总体评价:</div>
<ul
class
=
"star_rating"
>
<li><a href=
"javascript:void(0)"
title=
"1 of 5 stars"
class
=
"one_star"
>1</a></li>
<li><a href=
"javascript:void(0)"
title=
"2 of 5 stars"
class
=
"two_stars"
>2</a></li>
<li><a href=
"javascript:void(0)"
title=
"3 of 5 stars"
class
=
"three_stars"
>3</a></li>
<li><a href=
"javascript:void(0)"
title=
"4 of 5 stars"
class
=
"four_stars"
>4</a></li>
<li><a href=
"javascript:void(0)"
title=
"5 of 5 stars"
class
=
"five_stars"
>5</a></li>
<li style=
"display:none;"
>
<input type=
"hidden"
id=
"stars"
value=
""
/>
</li>
</ul>
<span id=
"selectStars"
style=
"padding-left:10px;"
>(最高为5星)</span>
</div>
</body>
</html>