H5Score

功能介绍

使用CSS编写,带有点击动画效果,多种星级评分特效。
直接使用即可,若需统计分数,调用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:最右弹出对号效果

基础样式示例:

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

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

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

/**
 * 显示评分
 * radioName : 单选按钮的name名
 */
zknightH5scoreCheck(radioName);

特别说明