JQuery制作的评星打分功能

评星打分系统最早出现在视频网站，因为表现形式比较生动，再配合Ajax功能易用的特点，而深受用户和开发人员喜欢。网上的实现方法也是各种各样，最近刚看到一个用Jquery实现评分的插件（地址在这里），可能是中午看得文章，代码有点长，搞得我很是头晕，索性下午自己把以前写的一个用来练CSS的静态模型加了点jquery代码，让它也生动起来。自我感觉我这个评分系统的HTML结构更加明朗和语义化，再者将默认、高亮、打分后三种状态的五星图片合成一张图片来实现便于管理。如果这个小东西再配上ajax和PHP就可以立马上线投入实战了，这里就不多说了，相信各位看官也都明白这些。

演示效果如下：

• 1
• 2
• 3
• 4
• 5

 

先看脚本：

var j = jQuery.noConflict();

再看样式：

}

最后是HTML结构：

<div id="xzw_starSys">
    <div id="xzw_starBox">
        <ul class="star" id="xzw_star">
            <li><a href="#" title="1颗星" class="one-star">1</a></li>
            <li><a href="#" title="2颗星" class="two-stars">2</a></li>
            <li><a href="#" title="3颗星" class="three-stars">3</a></li>
            <li><a href="#" title="4颗星" class="four-stars">4</a></li>
            <li><a href="#" title="5颗星" class="five-stars">5</a></li>
        </ul>
        <div class="current-rating" id="showb"></div>
    </div>
    <span class="description"></span>
</div>

后记：当这个东西做完的时候，我又联想到似乎可以用图形来结合表单元素比如radio,checkbox做一些有趣的图像化表单选择操作。有空再尝试尝试...