jquery 打分程序简单好用

最新推荐文章于 2024-08-18 10:20:51 发布

weixin_30699465

最新推荐文章于 2024-08-18 10:20:51 发布

阅读量60

点赞数

原文链接：http://www.cnblogs.com/nier/archive/2012/03/17/2403343.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.raty.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#div1").hover(function(){
    $("#div1 li").hover(function(){
     h=0;
     n=$("#div1 li").index(this);
for(var i=0;i<=n;i++){
      $("#div1 li").eq(i).addClass("on");
     }
     $("#div1 li").click(function(){
       h=1;
       m=$("#div1 li").index(this);
for(var i=0;i<=m;i++){
        $("#div1 li").eq(i).addClass("on");
       }
return;
      })
    },function(){
if(h==0)
for(var i=5;i>=n;i--){
       $("#div1 li").eq(i).removeClass("on");
      }
     }
    )
   },function(){
if(h==0)
for(var i=0;i<=5;i++){
     $("#div1 li").eq(i).removeClass("on");
     }
    })
 })
</script>
<style type="text/css">
#div1 ul li{
 margin:0 -8px;
 width:30px;
 height:34px;
 list-style:none;
 float:left;
 width:35px;
 background:url(img/xing1.gif) center center no-repeat;
 margin-left:10px;
}
#div1 ul li.on{
 background:url(img/xing2.gif) center center no-repeat;
}
#div1{
 height:35px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>