jQuery动态星级评分效果实现方法

最新推荐文章于 2024-04-20 00:42:24 发布

bit小兵

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量921

点赞数

文章标签： javascript xhtml php ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6386305.html

版权

本文实例讲述了jQuery动态星级评分效果实现方法。分享给大家供大家参考。具体如下：
这里的jQuery星级评分代码，是大家都很喜欢的功能，目前广泛应用，本星级评分加入了动画效果，注意，如果要真正实现星级评分，你需要动态程序配合，如ASP/PHP等，以便将评分值存入数据库。
运行效果如下图所示：
 
  <!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>jquery超漂亮星级评分</title> 
 
  <script type= 
  "text/javascript" 
  src= 
  "jquery-1.6.2.min.js" 
  ></script> 
 
  <style> 
 
  .user_rate {font-size:14px; position:relative; padding:10px 0;} 
 
  .user_rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;} 
 
  .user_rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color: 
  #DD5400;} 
 
  .user_rate p span.g {font-size:22px; display:block; float:left; color: 
  #DD5400;} 
 
  .big_rate_bak {width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(http: 
  //files.jb51.net/file_images/article/201508/201586174000242.gif) left bottom repeat-x;} 
 
  .big_rate_bak b {display:inline-block; width:24px; height:28px; position:relative; z-index:1000; cursor:pointer; overflow:hidden;} 
 
  .big_rate_up {width:140px; height:28px; position:absolute; top:0; left:0; background:url(http: 
  //files.jb51.net/file_images/article/201508/201586174000242.gif) left top;} 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "user_rate" 
  > 
 
  <div class= 
  "big_rate_bak" 
  > 
 
  <b rate= 
  "2" 
  onclick= 
  "javascript:up_rate(20);" 
  > </b> 
 
  <b rate= 
  "4" 
  onclick= 
  "javascript:up_rate(40);" 
  > </b> 
 
  <b rate= 
  "6" 
  onclick= 
  "javascript:up_rate(60);" 
  > </b> 
 
  <b rate= 
  "8" 
  onclick= 
  "javascript:up_rate(80);" 
  > </b> 
 
  <b rate= 
  "10" 
  onclick= 
  "javascript:up_rate(100);" 
  > </b> 
 
  <div style= 
  "width:45px;" 
  class= 
  "big_rate_up" 
  ></div> 
 
  </div> 
 
  <p><span id= 
  "s" 
  class= 
  "s" 
  ></span><span id= 
  "g" 
  class= 
  "g" 
  ></span></p> 
 
  </div> 
 
  <br><br>如果运行错误请刷新页面即可~ 
 
  </body> 
 
  <script type= 
  "text/javascript" 
  > 
 
  $( 
  function 
  (){ 
 
  get_rate(88); 
 
  }) 
 
  function 
  get_rate(rate){ 
 
  rate=rate.toString(); 
 
  var 
  s; 
 
  var 
  g; 
 
  $( 
  "#g" 
  ).show(); 
 
  if 
  (rate.length>=3){ 
 
  s=10;   
 
  g=0; 
 
  $( 
  "#g" 
  ).hide(); 
 
  } 
  else 
  if 
  (rate== 
  "0" 
  ){ 
 
  s=0; 
 
  g=0; 
 
  } 
  else 
  { 
 
  s=rate.substr(0,1); 
 
  g=rate.substr(1,1); 
 
  } 
 
  $( 
  "#s" 
  ).text(s); 
 
  $( 
  "#g" 
  ).text( 
  "." 
  + g); 
 
  $( 
  ".big_rate_up" 
  ).animate({width:(parseInt(s)+parseInt(g)/10) * 14,height:26},1000); 
 
  $( 
  ".big_rate_bak b" 
  ).each( 
  function 
  (){ 
 
  $( 
  this 
  ).mouseover( 
  function 
  (){ 
 
  $( 
  ".big_rate_up" 
  ).width($( 
  this 
  ).attr( 
  "rate" 
  ) * 14 ); 
 
  $( 
  "#s" 
  ).text($( 
  this 
  ).attr( 
  "rate" 
  )); 
 
  $( 
  "#g" 
  ).text( 
  "" 
  ); 
 
  }).click( 
  function 
  (){ 
 
  $( 
  "#f" 
  ).text($( 
  this 
  ).attr( 
  "rate" 
  )); 
 
  $( 
  "#my_rate" 
  ).show(); 
 
  }) 
 
  }) 
 
  $( 
  ".big_rate_bak" 
  ).mouseout( 
  function 
  (){ 
 
  $( 
  "#s" 
  ).text(s); 
 
  $( 
  "#g" 
  ).text( 
  "." 
  + g); 
 
  $( 
  ".big_rate_up" 
  ).width((parseInt(s)+parseInt(g)/10) * 14); 
 
  }) 
 
  } 
 
  function 
  up_rate(rate){ 
 
  $( 
  ".big_rate_up" 
  ).width( 
  "0" 
  ); 
 
  get_rate(rate); 
 
  } 
 
  </script> 
 
  </html>

转载于:https://www.cnblogs.com/sjqq/p/6386305.html

bit小兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态星级评分效果实现方法

本文实例讲述了jQuery动态星级评分效果实现方法。分享给大家供大家参考。具体如下：这里的jQuery星级评分代码，是大家都很喜欢的功能，目前广泛应用，本星级评分加入了动画效果，注意，如果要真正实现星级评分，你需要动态程序配合，如ASP/PHP等，以便将评分值存入数据库。运行效果如下图所示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
复制链接

扫一扫