使用jQuery实现星级评分代码分享

前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。

代码如下:

<div class="star"> 
<span>jQuery星级评论打分</span> 
<ul> 
<li><a href="javascript:;">1</a></li> 
<li><a href="javascript:;">2</a></li> 
<li><a href="javascript:;">3</a></li> 
<li><a href="javascript:;">4</a></li> 
<li><a href="javascript:;">5</a></li> 
</ul> 
</div>

代码如下:

<style> 
*{margin:0;padding:0;font-size:13px;} 
ul,li{list-style:none;} 
.star {position:relative;width:600px;height:24px; margin:20px auto 0;} 
.star span {float:left;height:19px;line-height:19px;} 
.star ul{margin:0 10px;} 
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;} 
.star li.on{background-position:0 -28px;} 
.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;} 
.star p em {color: #FF6600;display: block;font-style: normal;} 
.star strong {color:#ff6600;padding-left:10px;} 
.hidden{display:none;} 
</style>

代码如下:

<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="score.js"></script> 
</head> 
 
<body> 
<script type="text/javascript"> 
$(function(){ 
var score = new Score({ 
callback: function(cfg) { 
console.log(cfg.starAmount); 
} 
}); 
}); 
</script>

代码如下:

/**
 * JQ评分效果
 */ 
 function Score(options) { 
    this.config = { 
        selector                  :   '.star',     // 评分容器 
        renderCallback            :   null,        // 渲染页面后回调 
        callback                  :   null         // 点击评分回调                          
    }; 
 
    this.cache = { 
        aMsg : [ 
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满", 
                "不满意|部分有破损，与卖家描述的不符，不满意", 
                "一般|质量一般，没有卖家描述的那么好", 
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的", 
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意" 
                ], 
        iStar  : 0, 
        iScore : 0 
    }; 
 
    this.init(options); 
 } 
 
 Score.prototype = { 
 
    constructor: Score, 
 
    init: function(options){ 
        this.config = $.extend(this.config,options || {}); 
        var self = this, 
            _config = self.config, 
            _cache = self.cache; 
 
        self._renderHTML(); 
    }, 
    _renderHTML: function(){ 
        var self = this, 
            _config = self.config; 
        var html = '<span class="desc"></span>' +  
                   '<p class="star-p hidden"></p>'; 
        $(_config.selector).each(function(index,item){ 
            $(item).append(html); 
            $(item).wrap($('<div class="parentCls" style="position:relative"></div>')); 
            var parentCls = $(item).closest('.parentCls'); 
            self._bindEnv(parentCls); 
            _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback(); 
        }); 
 
    }, 
    _bindEnv: function(parentCls){ 
        var self = this, 
            _config = self.config, 
            _cache = self.cache; 
 
        $(_config.selector + ' li',parentCls).each(function(index,item){ 
             
            // 鼠标移上 
            $(item).mouseover(function(e){ 
                var offsetLeft = $('ul',parentCls)[0].offsetLeft; 
                ismax(index + 1); 
                 
                $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden'); 
                $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'}); 
                 
 
                var html = '<em>' +  
                              '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +  
                           '</em>' + _cache.aMsg[index].split('|')[1]; 
                $('p',parentCls).html(html); 
            }); 
 
            // 鼠标移出 
            $(item).mouseout(function(){ 
                ismax(); 
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
            }); 
             
            // 鼠标点击 
            $(item).click(function(e){ 
                var index = $(_config.selector + ' li',parentCls).index($(this)); 
                _cache.iStar = index + 1; 
                                 
                !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden'); 
                var html = '<strong>' + 
                                index + 
                           '分</strong>' +_cache.aMsg[index].split('|')[1]; 
 
                $('.desc',parentCls).html(html); 
                _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar}); 
            }); 
             
        }); 
 
        function ismax(iArg) { 
            _cache.iScore = iArg || _cache.iStar; 
            var lis = $(_config.selector + ' li',parentCls); 
             
            for(var i = 0; i < lis.length; i++) { 
                lis[i].className = i < _cache.iScore ? "on" : ""; 
            } 
        } 
    } 
 };

使用方法超级简单，这里就不多废话了，小伙伴们拿走自由发挥吧。

赞 (0)

相关推荐

  • javascript 星级评分效果(手写)

    今天上午抽空随手写了个星级评分的效果,给大家分享下.由于水平有限,如有问题请指出. 首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态.如图: 最后附上代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style

  • JS实现带提示的星级评分效果完整实例

    JS实现带提示的星级评分效果完整实例

    本文实例讲述了JS实现带提示的星级评分效果.分享给大家供大家参考,具体如下: 这是一款JS仿淘宝网的星级评分系统,鼠标放在上边可以显示星级代表的评分级别,鼠标点击时会选中当前的星级,目前此功能在网页上十分流行,虽然是仿做的,但已经很不错的功能了,希望大家喜欢! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-start-level-pf-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • 原生JS实现-星级评分系统的简单实例

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点

  • 基于jQuery的星级评分插件

    基于jQuery的星级评分插件

    首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮.一.原理 本程序的原理是这样的:一个"ul"标签,该标签的背景为灰色的星星,控制"ul"标签的宽度显示星星的数量.例如:一个星星图片的宽度为23px,那么要显示10个星星,则"ul"的宽度为230px就可以显示10个星星. n个"li"标签,n表示您要显示星星的个数,例如你要显示10个星星那么将有10个

  • 用css制作星级评分第1/3页

    用css制作星级评分第1/3页

    原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/ 版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea. 先看看效果 Step 1: XHTML <ul class="star-rating">       <li><a href="

  • jquery插件star-rating.js实现星级评分特效

    jquery插件star-rating.js实现星级评分特效

    特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s

  • jQuery+PHP星级评分实现方法

    本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML <div class="rate"> <div class="big_rate"> <span rate="2"> </span> <span rate="4"> </span> <span rate="6

  • JavaScript制作淘宝星级评分效果的思路

    JavaScript制作淘宝星级评分效果的思路

    小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果: 现附上自己写的源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script language="JavaScript" type="text/javascript">

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

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

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

  • jQuery Raty 一款不错的星级评分插件

    jQuery Raty 一款不错的星级评分插件

    在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求. 一.展示 二.使用教程 ①.下载插件 https://github.com/wbotelhos/raty ②.导入文件 <script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script> <link type="text/cs

随机推荐