`
再逢山水
  • 浏览: 152966 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery星星评级代码

 
阅读更多

 

<html>
<title>JQuery星星评级 http://meego123.net/</title>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var ltupper=["一","二","三","四","五"];

$(document).ready(function(){
  $('.star_rating li a').each(function(){
	  $(this).click(function(){						
          var lt=getStars($(this).attr('class'));//通过类名判断星星数
		  
		  $('#stars').val(lt);
		  $('#selectStars').text(ltupper[lt-1]+'星');
		  $('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
		  $('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
	  })
  })
  $('.star_rating li a').hover(function(){
	  var lt=getStars($(this).attr('class'));
	  
		  $('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
		  $('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
		  $('#selectStars').text(ltupper[lt-1]+'星');
  },function(){
	  var lt=Number($('#stars').val());
	  if(lt==""){
		 $('#selectStars').text('（最高为5星）');
	  }else{
		  $('#selectStars').text(ltupper[lt-1]+'星');
	  }
	  $('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
	  $('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
  })
})
//通过类名判断星星数
function getStars(stars){
	var re=1;
	switch(stars){
		case 'one_star':re=1;break;
		case 'two_stars':re=2;break;
		case 'three_stars':re=3;break;
		case 'four_stars':re=4;break;
		case 'five_stars':re=5;break;
	}
	return re;
}
</script>
<style type="text/css">
<!--
.star_rating {float:left;display:block;list-style:none;margin:-1px 0 0 -1px; padding:0; width:80px; height:16px; position:relative; background:url(images/white.jpg) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:16px;height:16px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(images/yellow.jpg) 0 16px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:16px;}
.star_rating a.two_stars{left:16px;}
.star_rating a.two_stars:hover{width:32px;}
.star_rating a.three_stars{left:32px;}
.star_rating a.three_stars:hover{width:48px;}
.star_rating a.four_stars{left:48px;}
.star_rating a.four_stars:hover{width:64px;}
.star_rating a.five_stars{left:64px;}
.star_rating a.five_stars:hover{width:80px;}
-->
</style>
</head>
<body>
<div style="display:block;float:left;width:100px;"><span>*</span>&nbsp;总体评价：</div>
               <ul class="star_rating">
               <li><a href="javascript:void(0)" title="1 of 5 stars" class="one_star">1</a></li>
               <li><a href="javascript:void(0)" title="2 of 5 stars" class="two_stars">2</a></li>
               <li><a href="javascript:void(0)" title="3 of 5 stars" class="three_stars">3</a></li>
               <li><a href="javascript:void(0)" title="4 of 5 stars" class="four_stars">4</a></li>
               <li><a href="javascript:void(0)" title="5 of 5 stars" class="five_stars">5</a></li>
                <li style="display:none;">
                <input type="hidden" id="stars" value="" />
               </li>
              </ul>
              <span id="selectStars" style="padding-left:10px;">（最高为5星）</span>
            </div>
</body>
</html>

 

分享到：
| PHP程序员最常犯的11个MySQL错误
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics