jQuery动态五星评分

效果

css

.star ul,

.star 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('../img/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;

}

html

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>jQuery实现五星级评分</title>

    <link rel="stylesheet" href="./css/score.css">

    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="./js/score.js"></script>

</head>

<body>

    <div class="star" id="goods">

        <span>商品</span>

        <input type="hidden" class="value-container" name="goods" value="">

        <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>

    <div class="star" id="logistics">

        <span>物流</span>

        <input type="hidden" class="value-container" name="logistics" value="">

        <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>

    <script type="text/javascript">

    $(function() {

        var goods_score = new Score({selector:'#goods.star'});

        var logistics_score = new Score({selector:'#logistics.star'});

    });

    </script>

</body>

</html>

function Score(options) { // 定义一个类

    this.config = {

        selector: '.star', // 评分容器

        renderCallback: null, // 渲染页面后回调

        callback: null // 点击评分回调

    };

    this.cache = {

        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'

                });

            });

            // 鼠标移出

            $(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;

                var score = index + 1;

                !$('p', parentCls).hasClass('hidden') && $('p', parentCls).addClass('hidden');

                var html = '<strong>' +

                    score +

                    '分</strong>';

                $('.desc', parentCls).html(html);

                // 加入分数

                $(this).parents(_config.selector).find('.value-container').val(score);

                // $(_config.selector).find('.value-container').val(score);

                _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" : "";

            }

        }

    }

};

这里有两种方式

1.针对所有的.star的

2.针对具体的.star的

$(function() {

        //var score = new Score(); // 不传参数，默认是.star

        var goods_score = new Score({selector:'#goods.star'}); // 传参数，只针对id为goods的.star

        var logistics_score = new Score({selector:'#logistics.star'});

});

下载

jQuery动态五星评分的更多相关文章

jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
五星评分效果原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要  <ul> ...
IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经被新元素的事件绑 ...
Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

Mybatis高级应用
Mybatis是一个半自动的框架.相对于hibernate全自动模式,mybatis为开发人员提供了更加灵活的对sql语句操作的控制能力,有利于dba对相关的sql操作进行优化,同时也方便开发者构建复 ...
web前端：css
css简介: web文档的结构由html元素定义,而这些html元素是如何显示的,则是由层叠样式表css来定义,这样就实现了结构与表现的分离. 1.外部样式表可以将样式定义放在一个单独的文件中,并且 ...
PHP 给前面或者后面添加0补位
相信大家一定遇到这样的问题,因为PHP是弱类型的,所以进行排序的时候,有时候很胃疼所以这里就需要将位数进行统一后进行处理一般都是将末尾添加0进行补位方法1 : str_pad — 使用另一个字 ...
Nico Game Studio 3.地图纹理编辑物体皮肤编辑
完成功能: 1.地图纹理编辑功能. 图层编辑,添加/删除纹理,地图编辑.网格绘制.
EventBus3 简单使用及注意点
博客: 安卓之家微博: 追风917 CSDN: 蒋朋的家简书: 追风917 # EventBus3 简介 EventBus Android 发布/订阅事件总线,可简化 Activities, Fr ...
对于百川SDK签名验证的问题
SDK是要在wantu.taobao.com生成的.而生成这个SDK其实是要上传一个apk,而这个上传其实就是取他的签名而已.验证就是那张yw222那张图片.重点是你上传的apk的签名是不是跟你的生成 ...
oracle 定位热块和热链的方法
定位热链的方法 declare v_num number;begin for i in 1..1000000 loop sele ...
GCDTimer
#import <Foundation/Foundation.h> @interface JKTimerManager : NSObject + (instancetype)sharedT ...
POJ 3280 Cheapest Palindrome（DP 回文变形）
题目链接:http://poj.org/problem?id=3280 题目大意:给定一个字符串,可以删除增加,每个操作都有代价,求出将字符串转换成回文串的最小代价 Sample Input 3 4 ...
343. Integer Break -- Avota
问题描述: Given a positive integer n, break it into the sum of at least two positive integers and maximi ...

jQuery动态五星评分

jQuery动态五星评分的更多相关文章

随机推荐

热门专题