如何固定住这种效果?

Question

缺少图片,你把这个图片下载后放到目录里就可以了.
http://www.jscode.cn/JsCode/images/star_rating2.gif

Answer 1

<script>
function T(n){
var aObj = document.getElementsByTagName("a");
//var num = aObj.length;
for(var i=0;i<3;i++){
aObj[i].style.background="url(http://www.jscode.cn/JsCode/images/star_rating2.gif) left bottom";
}
}
</script>
<ul class="star-rating"> 
<li class="current-rating">Currently 3.5/5 Stars. </li> 
<li> <a href="#" title="1 star out of 5" class="one-star">1 </a> </li> 
<li> <a href="#" title="2 stars out of 5" class="two-stars">2 </a> </li> 
<li> <a href="#" title="3 stars out of 5" class="three-stars" style="background:none;" onclick="T(3);">3 </a> </li> 
<li> <a href="#" title="4 stars out of 5" class="four-stars">4 </a> </li> 
<li> <a href="#" title="5 stars out of 5" class="five-stars">5 </a> </li> 
</ul> 

Answer 2

<div style=" width:200px; height:30px; background:#ccc">
  <div style="width:10%; height:30px; background:#0f0">
   </div>
</div>另一种方法就是用JS来控制它的宽度，里面的用百分比，这样的话比较方便，而且还可以打4.5等的分数。

Answer 3

<ul class="star-rating"> 
<li class="current-rating">Currently 3.5/5 Stars. </li> 
<li> <a href="#" title="1 star out of 5" class="one-star" onclick="T(1);">1 </a> </li> 
<li> <a href="#" title="2 stars out of 5" class="two-stars" onclick="T(2);">2 </a> </li> 
<li> <a href="#" title="3 stars out of 5" class="three-stars" onclick="T(3);">3 </a> </li> 
<li> <a href="#" title="4 stars out of 5" class="four-stars" onclick="T(4);">4 </a> </li> 
<li> <a href="#" title="5 stars out of 5" class="five-stars" onclick="T(5);">5 </a> </li> 
</ul>
<script>function T(n){
var aObj = document.getElementsByTagName("a");
//var num = aObj.length;
for(var i=0;i<aObj.length;i++){
aObj[i].style.background="url(http://www.jscode.cn/JsCode/images/star_rating2.gif) left top";
}
for(var i=0;i<n;i++){
aObj[i].style.background="url(http://www.jscode.cn/JsCode/images/star_rating2.gif) left bottom";
}
}</script>那就先重新设一次咯

Answer 4

呵呵,是可以倒序点了.可又出现个问题,就是CSS效果没有了.(鼠标滑动到上面不变绿色)