展示：

实现方法：

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. iOS之 开发常用到的宏定义

    不久前做过一个小项目种用到了就记录下来方便自己以后使用,一个非常实用的宏定义来打印函数名称等 #ifdef DEBUG #define DebugLog(fmt, ...) NSLog((@" ...

  2. 转：JS获取浏览器高度和宽度

    发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...

  3. [转]android笔记--Intent和IntentFilter详解

    Intent用于启动Activity, Service, 以及BroadcastReceiver三种组件, 同时还是组件之间通信的重要媒介. 使用Intent启动组件的优势1, Intent为组件的启 ...

  4. php示例代码之使用mysql_fetch_object函数

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  5. C#语言基础-类——string增加内容

    .split()    分离——属于string类            Console.Write("请输入姓名和学号(**-****):");            strin ...

  6. 转载 sql 存储过程与函数区别

    SQL Server用户自定义函数和存储过程有类似的功能,都可以创建捆绑SQL语句,存储在server中供以后使用.这样能够极大地提高工作效率,通过以下的各种做法可以减少编程所需的时间: 重复使用编程 ...

  7. linux下使用Apache+php实现留言板功能的网站

    一.首先我们的linux服务器上要安装Apache和php 请参考:http://www.cnblogs.com/dagege/p/5949620.html 二.关闭防火墙服务,关闭selinux 请 ...

  8. COM中的线程模式

      Choosing the threading model for an object depends on the object's function. An object that does e ...

  9. 工欲善其事必先利其器——dreamweaver

    1.内置了一个webkit内核,所以实时视图与chrome浏览器效果一样. 2.DW中主浏览器的快捷键是f12,所以可以f12快速打开浏览器. 3.DW中首选项无法恢复到默认值. 4.有用首选项 5. ...

  10. 百度CDN 网站SSL 配置

    百度CDN SSL配置步骤 一般从SSL提供商购买到的证书是CRT二进制格式的. 1. 将 CRT 导入到IIS中, 然后从IIS中导出为PFX格式 2. 下载openssl,执行下面命令 提取用户证 ...