前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分
<div class="star"> <span>jQuery星级评论打分</span> <ul> <li><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href="javascript:;">4</a></li> <li><a href="javascript:;">5</a></li> </ul> </div>
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>
<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="score.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var score = new Score({
callback: function(cfg) {
console.log(cfg.starAmount);
}
});
});
</script>
/**
* JQ评分效果
*/
function Score(options) {
this.config = {
selector : '.star', // 评分容器
renderCallback : null, // 渲染页面后回调
callback : null // 点击评分回调
};
this.cache = {
aMsg : [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
],
iStar : 0,
iScore : 0
};
this.init(options);
}
Score.prototype = {
constructor: Score,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
self._renderHTML();
},
_renderHTML: function(){
var self = this,
_config = self.config;
var html = '<span class="desc"></span>' +
'<p class="star-p hidden"></p>';
$(_config.selector).each(function(index,item){
$(item).append(html);
$(item).wrap($('<div class="parentCls" style="position:relative"></div>'));
var parentCls = $(item).closest('.parentCls');
self._bindEnv(parentCls);
_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
});
},
_bindEnv: function(parentCls){
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.selector + ' li',parentCls).each(function(index,item){
// 鼠标移上
$(item).mouseover(function(e){
var offsetLeft = $('ul',parentCls)[0].offsetLeft;
ismax(index + 1);
$('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');
$('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});
var html = '<em>' +
'<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +
'</em>' + _cache.aMsg[index].split('|')[1];
$('p',parentCls).html(html);
});
// 鼠标移出
$(item).mouseout(function(){
ismax();
!$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
});
// 鼠标点击
$(item).click(function(e){
var index = $(_config.selector + ' li',parentCls).index($(this));
_cache.iStar = index + 1;
!$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');
var html = '<strong>' +
index +
'分</strong>' +_cache.aMsg[index].split('|')[1];
$('.desc',parentCls).html(html);
_config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});
});
});
function ismax(iArg) {
_cache.iScore = iArg || _cache.iStar;
var lis = $(_config.selector + ' li',parentCls);
for(var i = 0; i < lis.length; i++) {
lis[i].className = i < _cache.iScore ? "on" : "";
}
}
}
};
这个也是在网上找的一个相对自己来说更实用一点的。做储备。
相关推荐
jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理、动画效果等功能，使得实现星级评分效果变得更为简便。本教程将深入探讨如何使用jQuery来创建一个动态的星级评分系统。 首先，我们需要理解基本...
总结来说，实现一个jQuery星级评分系统主要涉及以下几个步骤： 1. 创建HTML结构，包含用于表示星星的元素。 2. 使用CSS定义星星的样式和交互效果。 3. 使用jQuery监听用户的点击事件，更新评分并改变显示。 4. 可选...
在本文中，我们将深入探讨如何基于jQuery实现一个功能完善的星级评分效果，这通常用于网站上的用户评价或评分系统。雅虎口碑网的星级评分界面是一个经典的例子，它提供了直观、易于使用的用户体验。以下是对实现这一...
总的来说，实现jQuery+PHP的星级评分功能涉及前端的交互设计、后端的数据处理以及数据库操作。通过这种方式，我们可以创建一个用户友好、功能完善的评分系统，为网站增加价值并提高用户参与度。在实际开发过程中，还...
使用jQuery实现星级评分系统是一种快速且有效的方法。由于jQuery的易用性，开发者可以轻松地为网站添加互动性很强的星级评分功能。需要注意的是，实际开发中还需要考虑一些其他因素，比如输入验证、安全性等，确保...
**jQuery 星级评分插件详解** 在Web开发中，为用户提供直观的反馈和互动是至关重要的，其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得创建...
本教程将详细讲解如何利用jQuery和PHP技术实现一个简单的星级评分功能。 首先，我们需要理解jQuery的作用。jQuery是一个JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画设计。在星级评分系统中，jQuery...
jQuery星级评分插件是一种在网页上实现用户评分功能的JavaScript工具，主要基于广泛使用的jQuery库。这个插件设计小巧，加载快速，使得它在各种网页应用中都能高效地工作，尤其是那些对性能有较高要求的场景。其核心...
CSS用于美化星级评分，可以设置未选中和选中状态的样式。通常，我们会为选中的星星设置一个背景图像，例如满星图标，而未选中的星星则可能是空星或者半星。通过使用`:hover`和`.active`等伪类选择器，可以实现鼠标...
很多网站都应用了星级评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。 1.本例实现的效果：过渡动画显示评分操作。 2.及时更新平均得分和用户所评的分数。 3.后台限制...
这个插件基于广泛使用的**jQuery**库，为开发者提供了一种简单且可定制的方式来实现用户友好的星级评分系统。它允许用户通过鼠标点击或者触摸操作对内容进行评分，同时提供了丰富的设置选项和回调函数，以适应各种...
总的来说，jQuery Raty星级评分插件以其强大的功能和灵活的自定义性，成为了网页开发中实现星级评分功能的首选工具。掌握其用法和配置，不仅可以提升网页的互动性，还能进一步优化用户体验，增强用户满意度。无论你...
通过以上介绍，我们可以看到"jquery星级评分.zip"提供的插件是如何在网页上实现一个功能完备且用户友好的评分系统。结合jQuery的便利性，开发者可以轻松地将这个评分功能整合到自己的项目中，提升用户的互动体验。...
《jQuery Raty：星级评分插件详解》 在网页交互设计中，用户评分系统是一个常见的功能，它能够直观地展示用户对产品或服务的满意度。jQuery Raty是一款强大的星级评分插件，以其易于使用和高度可扩展性在开发社区中...
【标题】"简单jQuery星级评分功能插件"是一款用于网页中的评分系统实现的JavaScript插件，它基于流行的jQuery库，能够轻松地为网站添加互动式的星级评分功能。这个插件设计简洁，易于集成，适用于博客评论、产品评价...
本文将深入探讨如何使用jQuery和AJAX技术实现一个动态的星级评分系统。 首先，我们要理解jQuery的核心功能。jQuery提供了一种简洁的方式来选择DOM元素、执行DOM操作、绑定事件处理程序和创建动画效果。它的语法简洁...
总结，创建一个jQuery星级评分系统包括以下步骤： 1. 创建HTML结构，包括隐藏的`radio`按钮和可视的星级图标。 2. 使用jQuery处理点击、鼠标悬停事件，更新用户评分并提供预览效果。 3. 设计CSS样式以展示选中和预览...
首先，jQuery星级评分插件的基本原理是利用HTML结构（通常是无序列表`<ul>`）来表示星形图标，通过CSS来定义星星的样式，然后通过JavaScript/jQuery来处理用户的鼠标交互，动态改变选中的星星数量并可能与后台进行...