H5Score

功能介绍

  1. 使用CSS编写，带有点击动画效果，多种星级评分特效。
  2. 直接使用即可，若需统计分数，调用js代码展示评分。

快速使用

引入CSS：zknight_h5score_index.css、zknight_h5score_base.css。

星级评分样式: zknight-h5score-basic：基础样式 zknight-h5score-slot：向上滚动效果 zknight-h5score-grow：发光动画效果 zknight-h5score-growRotate：发光并旋转效果 zknight-h5score-fade：淡入淡出效果 zknight-h5score-checkmark：最右弹出对号效果

基础样式示例:

  1.     <form>
  2.         <fieldset class="zknight-h5score-basic">
  3.             <input type="radio" id="rate5-1" name="rating_basic" value="5" onclick="zknightH5scoreCheck('rating_basic')" />
  4.             <label for="rate5-1" title="Amazing">5 stars</label>
  5.             <input type="radio" id="rate4-1" name="rating_basic" value="4" onclick="zknightH5scoreCheck('rating_basic')" />
  6.             <label for="rate4-1" title="Very good">4 stars</label>
  7.             <input type="radio" id="rate3-1" name="rating_basic" value="3" onclick="zknightH5scoreCheck('rating_basic')" />
  8.             <label for="rate3-1" title="Average">3 stars</label>
  9.             <input type="radio" id="rate2-1" name="rating_basic" value="2" onclick="zknightH5scoreCheck('rating_basic')" />
  10.             <label for="rate2-1" title="Not good">2 stars</label>
  11.             <input type="radio" id="rate1-1" name="rating_basic" value="1" onclick="zknightH5scoreCheck('rating_basic')" />
  12.             <label for="rate1-1" title="Terrible">1 star</label>
  13.         </fieldset>
  14.     </form>

其余示例请参考index.html文件

使用index页面的方法，提示选择评分分数:

  1. /**
  2.  * 显示评分
  3.  * radioName : 单选按钮的name名
  4.  */
  5. zknightH5scoreCheck(radioName);

特别说明

无