评分条的选项，做了一个下午，晕死了

admin , 2008/12/29 17:43 , 积累些，自己也写些 , Comments(1) , Reads(1023) , Via Original

下面是一个有评分效果的一个js,没有想到写了一个下午，不能不说不晕呀！
[hcode]<!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=utf-8" />
<title>Untitled Document</title>
    <style type="text/css">
    .pingfeng{}
    .pingfeng li,ul{margin:0;padding:0;}
    .pingfeng li{width:100px;float:left; height:20px; text-align:right; list-style:none;}
  .pingfeng li a{width:100px;float:left; height:20px; text-align:right; list-style:none;}
    .pingfeng li a:hover{background-color:#ff00fc;}
  .pingfeng li.hover{background-color:#ff00fc;}
    </style>

<script type="text/javascript" src="http://www.aixq.com/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function()
   {
    toclick("pf1");

   });

// JavaScript Document
function toclick(ids,txts)
{

  $("#"+ids+" li").each(function(i){
     $($("#"+ids+" li")[i]).mouseover(function(){
      $(this).css("background-color","#ff00fc");
        for(k=0;k<5;k++)
        {
          $($("#"+ids+" li")[k]).css("background-color","");
        }

        for(k=0;k<=i;k++)
        {
           $($("#"+ids+" li")[k]).css("background-color","#ff00fc");
        }

      });

     });



  $("#"+ids+" li").each(function(i){
     $($("#"+ids+" li")[i]).click(function(){
      $(this).css("background-color","#ff00fc");
        for(k=0;k<5;k++)
        {
          $($("#"+ids+" li")[k]).css("background-color","");
        }

        for(k=0;k<=i;k++)
        {
           $($("#"+ids+" li")[k]).css("background-color","#ff00fc");
        }

      });

     });
}

function getpfval(ids)
{
;
}

</script>

</head>

<body>
非常不足
                尚可
                                    齊全
  <div style="width:501px; border: solid 1px #000; height:20px;" class="pingfeng" id="pf1" >
      <ul style="margin:0;padding:0;">
      <li><a href="javascript:getpfval('1')" class="one"></a></li>
      <li><a href="javascript:getpfval('2')" class="two"></a></li>
      <li><a href="javascript:getpfval('3')" class="three"></a></li>
      <li><a href="javascript:getpfval('4')" class="four"></a></li>
      <li><a href="javascript:getpfval('5')" class="five"></a></li>
    </ul>
</div>

<div class="pingfeng" style="clear:both;">
   <ul style="margin:0;padding:0;">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>

</div>
</body>
</html>
[/hcode]