45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:jquery如何实现简单的打分程序?

jquery如何实现简单的打分程序?

2015-08-10 09:45:45 来源:www.45fan.com 【

jquery如何实现简单的打分程序?

本文实例讲述了jquery实现简单实用的打分程序。分享给大家供大家参考。具体如下:

<!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>

希望本文所述对大家的jquery程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/17280.html
Tags: 实现 jquery 简单
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部