展示：

实现方法：

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-两个滚动条，上下都能滑动

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  2. 基于ruby的watir自动化测试 笔记二

    基于ruby的watir自动化测试 笔记一的补充版,新增加了些特殊的控件捕获方法.还在更新中.... attribute_value 获取当前控件的属性 Value = ie.link(:id=> ...

  3. 在线研讨会webinars

    我是怎么一步一步找到这里的?  jedox-jedox Webinars (不懂意思)--->google [      webinars      open source ],->htt ...

  4. CMMI能搭救企业吗？

    曾经有朋友跟我提起,他们公司突然有人关注我了,我自然很开心了,看来我名声在外了,哈哈!但我的朋友说,他是这样关注的:“他怎么还在那个公司?他们不是过了5级了吗?我们公司过了级后,EPG(Enginee ...

  5. ORACLE中伪表 dual 的用法

     dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sel ...

  6. Mongodb Manual阅读笔记：MongoDB教程

    Mongodb教程的说明,可以当手册用 Getting Started Install MongoDB on Linux Systems Install MongoDB on Red Hat Ente ...

  7. 看看Parallel中高度封装的三个方法，Invoke,For和ForEach

    说到.net中的并行编程,也许你的第一反应就是Task,确实Task是一个非常灵活的用于并行编程的一个专用类,不可否认越灵活的东西用起来就越 复杂,高度封装的东西用起来很简单,但是缺失了灵活性,这篇我 ...

  8. 编写BinIoDemo.java的Java应用程序，程序完成的功能是：完成1.doc文件的复制，复制以后的文件的名称为自己的学号姓名.doc。

    package zuoye; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  9. 3.Docker - 镜像管理

    一.使用容器生成镜像 1.进入容器,安装软件包(任意包) 1 2 3 4 5 6 7 bash-3.2# docker ps -a CONTAINER ID        IMAGE          ...

  10. CentOS系统启动流程你懂否

    一.Linux内核的组成 相关概念: Linux系统的组成部分:内核+根文件系统 内核:进程管理.内存管理.网络协议栈.文件系统.驱动程序. IPC(Inter-Process Communicati ...