HTML5商城开发三 jquery 星星评分插件

简介: 展示:   实现方法: 1.html引用star-grade.js $(document).ready(function () { $(".

展示:

 

实现方法:

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获取评分值
            $("#pye").SetStars(3);//传分数,自动列出星星 }); </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);

 

相关文章
|
1月前
|
移动开发 Java API
HTML 插件详解
HTML中的插件如Flash、Java applets和ActiveX控件曾广泛用于扩展网页功能,但因安全性问题和跨浏览器兼容性不佳而逐渐被淘汰。现代替代方案包括HTML5的`&lt;audio&gt;`、`&lt;video&gt;`、`&lt;canvas&gt;`和SVG等,以及WebAssembly和各种JavaScript API(如WebRTC和WebGL),这些新技术不仅提升了网页性能和安全性,还改善了用户体验。建议开发者优先采用HTML5和相关API。
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
4天前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
16 1
利用html2canvas插件自定义生成名片信息并保存图片
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
61 1
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
94 0
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
41 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
40 4
jQuery Cookie 插件
|
11天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
24 0
|
3月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
4月前
WordPress插件介绍页源码单页Html源码
WordPress插件介绍页源码单页Html源码
63 2
WordPress插件介绍页源码单页Html源码