JQuery星星评级

最新推荐文章于 2022-01-28 16:59:58 发布

光着脚丫数星星

最新推荐文章于 2022-01-28 16:59:58 发布

阅读量658

点赞数

分类专栏： Web前端文章标签： JQuery应用

本文链接：https://blog.csdn.net/youyou_yo/article/details/47316003

版权

Web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1. [图片] 1.png

2. [图片] 2.png    

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