展示：
实现方法：
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);
.
相关推荐
"jQuery星星评分插件"就是这样一个工具，它能够为网站添加美观且易于使用的评分系统，让用户可以直观地给出他们对产品或服务的评价。这个插件通常用于电商网站、评论板块、电影评分等场景，提高了用户参与度和网站的...
【标题】"仿淘宝评分插件jquery星星评分插件"是一个基于jQuery库开发的前端组件，主要用于实现类似于淘宝网站上的用户评价系统。该插件通过显示星星图标，让用户能够直观地进行评分，同时提供了一种互动式的用户体验...
jQuery星星评分插件就是这样一个工具，它允许用户通过鼠标滑动在星星上进行评分，既适用于桌面端，也完美支持移动端。下面将详细介绍这个插件的工作原理和实现方式。 首先，jQuery星星评分插件的核心是JavaScript库...
《jQuery星星评分插件：构建互动式评价体验》 在当今的Web开发中，用户界面的交互性成为了提升用户体验的关键因素。jQuery星星评分插件，正如其名，为网页引入了一种直观、易于操作的评分机制，使得用户可以轻松地...
Bootstrap响应式jQuery星星评分插件是一种常见的用户反馈和评价机制，广泛应用于网站和应用程序中，为用户提供直观、易于操作的评级体验。这个插件利用了流行的前端框架Bootstrap的响应式设计，确保在不同设备和屏幕...
至此，一个完整的jQuery星星评分插件已经实现。你可以根据需求调整样式、增加自定义功能，或者与其他前端框架结合使用。记得替换代码中的路径以确保正确加载资源文件。这个插件不仅提供了良好的用户体验，还能方便地...
响应式jQuery星星评分插件，如"Bootstrap Star Rating"，是一种常见的用户反馈工具，常用于网站评论、产品评价或服务评级等场景。该插件基于流行的前端框架Bootstrap，结合jQuery库，提供了一种灵活且直观的五星级...
Bootstrap Star Rating是一款基于jQuery的插件，用于在Web应用程序中创建功能丰富的星级评分系统。它以其简洁的界面和强大的自定义能力，在Web开发领域中受到广泛欢迎。此插件是与Bootstrap框架兼容的，因此可以无缝...
**jQuery 星级评分插件详解** 在Web开发中，为用户提供直观的反馈和互动是至关重要的，其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得创建...
在IT行业中，jQuery星星评分插件是一种常见的交互元素，常用于网站评论、产品评价或用户反馈等场景。这种插件允许用户通过点击或滑动鼠标选择一个星数来表达他们的满意度或评分。以下是对该主题的详细阐述： 一、...
**jQuery星星评分插件特效代码详解** 在网页交互设计中，星星评分系统是一种常见的用户反馈方式，它允许用户通过点击星星来对某个内容或服务进行评价。jQuery星星评分插件正是这种功能的实现工具，它简化了开发过程...
在实际应用中，这个【满意度jQuery星星评分插件】可以与其他前端框架（如Bootstrap、AngularJS等）配合使用，也可以独立部署在任何支持jQuery的网页上。通过合理的布局和交互设计，它能够有效地提升用户对网站或应用...
jQuery星星评分插件jquery.raty.js是一款常用的前端交互组件，用于实现用户对内容进行评分的五角星展示和选择功能。这款插件以其简洁的API和丰富的自定义选项，广泛应用于网站评论、产品评价等场景。 一、核心概念...
jQuery星星打分评分插件是一种常见的前端交互组件，主要用于用户评价、反馈或评分系统，例如在电商网站的商品评价、电影评分等场景。该插件基于JavaScript库jQuery构建，旨在提供一个直观、易于定制的用户体验。 ...
**基于SVG的jQuery星级评分插件-jRate** 在Web开发中，用户界面的交互性和视觉效果对于提升用户体验至关重要。`jRate`是一个优秀的jQuery插件，它专门用于创建基于SVG的星级评分系统。这个插件使得开发者能够轻松地...
jQuery星级评分插件是一种在网页上实现用户评分功能的JavaScript工具，主要基于广泛使用的jQuery库。这个插件设计小巧，加载快速，使得它在各种网页应用中都能高效地工作，尤其是那些对性能有较高要求的场景。其核心...
在“基于SVG的jQuery星级评分插件”中，jQuery被用来处理用户与星级评分图标的交互，如响应用户的点击事件，改变星级状态等。 【星级评分插件】 星级评分插件是网页中常见的一种组件，通常用于让用户对产品、服务或...
在网页设计中，用户交互是至关重要的，而jQuery星级评分插件就提供了这样一种直观、友好的用户体验方式，让用户能够轻松地对内容进行评分。本文将深入探讨4款简单实用的jQuery星级评分插件，以及如何调整它们的样式...
**jQuery星级评分插件**是一种常用的前端交互组件，主要用于用户评价、反馈或评分场景，如电商商品评价、电影评分等。这种插件基于JavaScript库jQuery，利用其强大的DOM操作和事件处理能力，能够轻松实现动态的星级...
**jQuery星级评分插件——Raty详解** 在Web开发中，提供用户友好、直观的界面是至关重要的。其中，星级评分系统是常见的交互元素，用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件，它使得在网页...