以前在做server页面时有做到一个星级评分的页面效果,虽然不不算好看,但也记下来吧。
通过选择框中的值控制黄色星的多少,原理就是控制css显示宽度来达到视觉效果
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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>make score page</title>
<style>
.fivestars,.fivestars div{background:transparent url(../mkscore/commstar.gif) repeat-x scroll left bottom;width:130px;}
.fivestars{padding:0; position:relative; line-height:28px;display:inline-block;}
.fivestars div{background-position:bottom center; text-indent:-9999px;}
.fivestars div{background-position:left top; width:0px;}
</style>
<script type="text/javascript">
function changestars(score)
{
var w=26; /* one star's width */
var totalw=w*score; /* score stars */
var aa=document.getElementById("autostars");
aa.style.width=totalw+"px";
}
</script>
</head>
<body>
<select οnchange="changestars(this.value)">
<option value="" selected="selected">--请选择--</option>
<option value="0">0分</option>
<option value="0.5">0.5分</option>
<option value="1">1分</option>
<option value="1.5">1.5分</option>
<option value="2">2分</option>
<option value="2.5">2.5分</option>
<option value="3">3分</option>
<option value="3.5">3.5分</option>
<option value="4">4分</option>
<option value="4.5">4.5分</option>
<option value="5">5分</option>
</select>
<div class="fivestars" id="fivestars"><div class="autostars" id="autostars"> </div></div>
</body>
</html>