展示：

实现方法：

1.html引用star-grade.js

<script type="text/javascript" src="Scripts/star-grade.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".sstar").BindStars();//使用属性data-score获取评分值
            $();//传分数，自动列出星星
        });
    </script>
<body>
    <div class="starscore sstar">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <span id="ye"></span>
    <div class="starscore" id="pye"></div>

    <div class="starscore starscore_sm" >
        <i class="inred"></i>
        <i class="inred"></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="starscore starscore_lg">
        <i class="onred"></i>
        <i class="onred"></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>

2.css样式

@charset "utf-8";
/* CSS Document */
.starscore {
    width: 200px;
    height: 30px;
}

    .starscore i {
        width: 14px;
        height: 14px;
        background: url(images/gray.gif) no-repeat; /* 14x14的灰色星星图标 */
        display: inline-block;
        vertical-align: middle;
        background-size: contain;
    }

        .starscore i.inred, .starscore i.onred {
            background: url(images/yel.gif) no-repeat; /* 14x14的黄色星星图标 */
        }

.starscore_lg > i {
    width: 18px;
    height: 18px;
}

.starscore_sm > i {
    width: 12px;
    height: 12px;
}

3.插件js源码

/*
*   jq扩展--星星评分插件
*
*   通过对象的属性data-score获取评分值
*   星星使用元素i表示，绑定星星背景图
*   鼠标进入、离开事件的绑定样式为inred，改变背景图
*   点击事件的绑定样式为onred，改变背景图
*/
(function ($) {
    "use strict";
    $.fn.BindStars = function () {
        var starElement = $(this);
        starElement.children("i").mouseleave(function () {
            starElement.find("i").each(function (index) {
                $(this).removeClass("inred");
            });
        });
        starElement.children("i").mouseenter(function () {
            var curIndex = starElement.find("i").index(this);
            starElement.find("i").each(function (index) {
                if (index <= curIndex) {
                    $(this).addClass("inred");
                }
                else {
                    $(this).removeClass("inred");
                }
            });
        });
        starElement.children("i").click(function () {
            var curIndex = starElement.find("i").index(this);
            starElement.find("i").each(function (index) {
                if (index <= curIndex) {
                    $(this).addClass("onred");
                }
                else {
                    $(this).removeClass("onred");
                }
            });
            starElement.attr("data-score", curIndex + 1);
        });
    };
    $.fn.SetStars = function (score) {
        var scoreStr = "";
        for (var i = 0; i < 5; i++) {
            if (i < score) {
                scoreStr += "<i class='onred'></i>";
            } else {
                scoreStr += "<i></i>";
            }
        }
        $(this).html(scoreStr);
    };
})(window.jQuery);

=====================================================================================================

博客:http://www.cnblogs.com/xcsn

=====================================================================================================

HTML5商城开发三 jquery 星星评分插件的更多相关文章

  1. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  2. 【自己开发】Jquery的loading插件

    经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jq ...

  3. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  4. HTML5商城开发二 通过位移实现拖动效果

    1.效果 在该区域内,手按住拖动,该模块可上下滑动,至最顶或最底部,滑动出现空白区域将自动缩回

  5. jQuery星级评分插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Con ...

  6. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  7. HTML5商城开发四 多图或多商品的水平滚动展示

    一.效果图 二.实现 样式: .horz_scroll { float: left; width: 20px; height: 130px; padding-top: 100px; padding-l ...

  8. js星星评分插件

    下载:https://files.cnblogs.com/files/wordblog/%E6%98%9F%E6%98%9F%E6%8F%92%E4%BB%B6.rar

  9. 一个非常棒的jQuery 评分插件--好东西要分享

    现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但 ...

随机推荐

  1. CSS行高——line-height

    学习资料 : http://www.cnblogs.com/dolphinX/p/3236686.html

  2. == 与 equals 区别

          同: ==和equals都比较两个值是否相等.相等为true 否则为false:   异:      1. == 是一个运算符;equals则是string对象的方法,可以.(点)出来.  ...

  3. 天书笔记：如何创建一个现代的footer（页脚）

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 老规矩,效果图 这个布局也是从b站看到的,回来自己实现了一遍 HTML: <div ...

  4. JavaScript Patterns 5.2 Declaring Dependencies

    It’s a good idea to declare the modules your code relies on at the top of your function or module. T ...

  5. python中列表、元组、字典内部功能介绍

    一.列表(list) 常用功能的介绍:

  6. SQL Server 使用游标更新数据库中的数据（使用存储过程）

    ALTER PROCEDURE [dbo].[POR_CURSOR_FOR_UPDATE] --创建存储过程 AS BEGIN SET nocount ON --忽略行数显示 DECLARE Upda ...

  7. proxool 连接池警告分析：appears to have started a thread named [HouseKeeper] but has failed to stop it

    1. 问题:日志中出现下面的警告: 警告: The web application [ROOT] appears to have started a thread named [HouseKeeper ...

  8. POI读写Word docx文件

    使用POI读写word docx文件 目录 1     读docx文件 1.1     通过XWPFWordExtractor读 1.2     通过XWPFDocument读 2     写docx ...

  9. php魔术方法罗列

    ##__sleep() 和 __wakeup() 当序列化(serialize)对象时,PHP 将试图在序列动作之前调用该对象的成员函数 __sleep() .__sleep() 方法常用于提交未提交 ...

  10. android Unhandled exception type ParseException提示报错

    Unhandled exception type ParseException 意思指:你有一个方法会抛出异常,但是你没有捕捉. 依提示添加一下即可解决: