仿迅雷评级功能
代码如下:
Code
<!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>1</title>
<style type="text/css">
* { font-size: 12pt;font-family: Tahoma;text-align:left;}
.vote {top:50px;left:50px;width:200px;}
img {cursor: pointer;}
body {margin:30px;}
</style>
<script type="text/javascript">
//预读图片,防止IE中都图片切换时反复下载图片
if (window.ActiveVObject) {
var preload0 = new Image();
preload0.src = "star_light.gif";
var preload1 = new Image();
preload1.src = "star_blank.gif";
}
//默认评分
var score = 3;
//设置评分状态
function setScore(score) {
for (var i=1; i<=5; i++) {
var img = $("img"+String(i));
img.src = (i<=score)?"star_light.gif":"star_blank.gif";
}
}
//保存评分结果
function commitScore(s) {score = s;}
//恢复到最后一次评分状态
function resetScore() {setScore(score);}
function $(id) {return document.getElementById(id);}
</script>
</head>
<body>
<div class="vote">
<img src="star_light.gif" id="img1" onmouseover="setScore(1)"
onclick="commitScore(1)" onmouseout="resetScore()" alt="1分" />
<img src="star_light.gif" id="img2" onmouseover="setScore(2)"
onclick="commitScore(2)" onmouseout="resetScore()" alt="2分" />
<img src="star_light.gif" id="img3" onmouseover="setScore(3)"
onclick="commitScore(3)" onmouseout="resetScore()" alt="3分" />
<img src="star_light.gif" id="img4" onmouseover="setScore(4)"
onclick="commitScore(4)" onmouseout="resetScore()" alt="4分" />
<img src="star_light.gif" id="img5" onmouseover="setScore(5)"
onclick="commitScore(5)" onmouseout="resetScore()" alt="5分" />
</div>
</body>
</html>
<!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>1</title>
<style type="text/css">
* { font-size: 12pt;font-family: Tahoma;text-align:left;}
.vote {top:50px;left:50px;width:200px;}
img {cursor: pointer;}
body {margin:30px;}
</style>
<script type="text/javascript">
//预读图片,防止IE中都图片切换时反复下载图片
if (window.ActiveVObject) {
var preload0 = new Image();
preload0.src = "star_light.gif";
var preload1 = new Image();
preload1.src = "star_blank.gif";
}
//默认评分
var score = 3;
//设置评分状态
function setScore(score) {
for (var i=1; i<=5; i++) {
var img = $("img"+String(i));
img.src = (i<=score)?"star_light.gif":"star_blank.gif";
}
}
//保存评分结果
function commitScore(s) {score = s;}
//恢复到最后一次评分状态
function resetScore() {setScore(score);}
function $(id) {return document.getElementById(id);}
</script>
</head>
<body>
<div class="vote">
<img src="star_light.gif" id="img1" onmouseover="setScore(1)"
onclick="commitScore(1)" onmouseout="resetScore()" alt="1分" />
<img src="star_light.gif" id="img2" onmouseover="setScore(2)"
onclick="commitScore(2)" onmouseout="resetScore()" alt="2分" />
<img src="star_light.gif" id="img3" onmouseover="setScore(3)"
onclick="commitScore(3)" onmouseout="resetScore()" alt="3分" />
<img src="star_light.gif" id="img4" onmouseover="setScore(4)"
onclick="commitScore(4)" onmouseout="resetScore()" alt="4分" />
<img src="star_light.gif" id="img5" onmouseover="setScore(5)"
onclick="commitScore(5)" onmouseout="resetScore()" alt="5分" />
</div>
</body>
</html>
其中star_light.gif图片是黄色星星的图片,star_blank.gif上白色星星都图片,这两张图我都是迅雷网页里下的。