展示：

实现方法：

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. 简单的ASP.NET Forms身份认证

    读了几篇牛人的此方面的文章,自己也动手做了一下,就想有必要总结一下.当然我的文章质量自然不能与人家相比,只是写给从没有接触过这个知识点的朋友. 网站的身份认证我以前只知道session,偶然发现一些牛 ...

  2. JS中的事件

    事件中的几种实现方式 Dom0时代 1.直接在html的属性中写JS代码 <div onclick="alert(4);">Div1 Element</div&g ...

  3. Tomcat：使用JMX监管Tomcat的几种方式

    Tomcat使用JMX管理方式,在Tomcat的自带应用manager就是使用了JMX方式来管理Tomcat,以此完成Web应用的动态部署.启动.停止. 然而manager应用是一种本地使用JMX接口 ...

  4. asp.net mvc 之旅—— 第一站 从简单的razor入手

    记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...

  5. 编写TextRw.java的Java应用程序，程序完成的功能是：首先向TextRw.txt中写入自己的学号和姓名，读取TextRw.txt中信息并将其显示在屏幕上。

    package zuoye; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; pub ...

  6. 创建一个Point类，有成员变量x，y，方法getX(),setX()，还有一个构造方 法初始化x和y。创建类主类A来测试它

    package com.hanqi.test; public class Point { private int x; private int y; Point(int xx,int yy) { x= ...

  7. android-xxxx must implement the inherited abstract method报错

    public class ContactMainFragment extends Fragment implements OnClickListener { 提示:ContactMainFragmen ...

  8. 系统进程 zygote（三）—— app_process 的 main 函数

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 首先: , , , ) < ) { // Older kernels don't understand ...

  9. [转]Membership 到 .NET4.5 之 ASP.NET Identity

    本文转自:http://www.cnblogs.com/jesse2013/p/membership-part3.html 我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然 ...

  10. 记一次惨痛的线上bug

    讲述背景,刚入职新公司2个月的时候,接手一个红包系统.资历尚浅,对业务也不是很熟悉.公司开发新的平台,需要使用红包功能来进行推广,按照产品的需求,进行开发...然而,问题就出在这里,红包接口比较陈旧, ...