<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<title>论坛Ajax评分效果</title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
/>
<style type=
"text/css"
>
*{margin:0;padding:0;font-size:12px}
#show{font:bold 14px/2 Georgia;text-align:center;}
.star{position:relative;width:150px;margin:0 auto;}
.star,.index,.star a{overflow:hidden;height:25px;background:url(
'images/221815eep7piubznelxi3e.gif'
) repeat-x;color:#FFF;font:0/0 arial;}
.index{position:absolute;z-index:1;top:0;left:0;margin:0;background-position:0 -60px;height:25px}
.star a{position:absolute;z-index:3;top:0;width:30px;background-position:0 -90px;}
.star a:hover{z-index:2;left:0;background-position:0 -30px;}
a.star1{left:0;}
a.star1:hover{width:30px;}
a.star2{left:30px;}
a.star2:hover{width:60px;}
a.star3{left:60px;}
a.star3:hover{width:90px;}
a.star4{left:90px;}
a.star4:hover{width:120px;}
a.star5{left:120px;}
a.star5:hover{width:150px;}
</style>
<script>
function
go(){
var
count
=sum=distance=0;
var
dd,a;
var
as
=document.getElementById(
"rank"
).getElementsByTagName(
"a"
);
var
here=document.getElementById(
"here"
);
var
show=document.getElementById(
"show"
);
for
(
var
i=0;i<
as
.length;i++){
as
[i].idx=i+1;
as
[i].onclick=
function
(){
++
count
;
this.w=30;
distance+=this.idx*this.w;
here.style.width=distance/
count
+
"px"
;
dd=parseInt(here.style.width)/30;
a=dd.toString().
substr
(0,4);
show.innerHTML=a+
"分"
;
return
false;
}
}
}
window.onload=
function
(){go()}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br />
<div id=
"rank"
class
=
"star"
>
<h3 id=
"here"
class
=
"index"
></h3>
<a title=
"给1分"
href=
"#"
class
=
"star1"
>1</a>
<a title=
"给2分"
href=
"#"
class
=
"star2"
>2</a>
<a title=
"给3分"
href=
"#"
class
=
"star3"
>3</a>
<a title=
"给4分"
href=
"#"
class
=
"star4"
>4</a>
<a title=
"给5分"
href=
"#"
class
=
"star5"
>5</a>
</div>
<div id=
"show"
>打分..</div>
</body>
</html>