<html>
<title>JQuery星星评级 http://meego123.net/</title>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var ltupper=["一","二","三","四","五"];
$(document).ready(function(){
$('.star_rating li a').each(function(){
$(this).click(function(){
var lt=getStars($(this).attr('class'));//通过类名判断星星数
$('#stars').val(lt);
$('#selectStars').text(ltupper[lt-1]+'星');
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
})
})
$('.star_rating li a').hover(function(){
var lt=getStars($(this).attr('class'));
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
$('#selectStars').text(ltupper[lt-1]+'星');
},function(){
var lt=Number($('#stars').val());
if(lt==""){
$('#selectStars').text('（最高为5星）');
}else{
$('#selectStars').text(ltupper[lt-1]+'星');
}
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
})
})
//通过类名判断星星数
function getStars(stars){
var re=1;
switch(stars){
case 'one_star':re=1;break;
case 'two_stars':re=2;break;
case 'three_stars':re=3;break;
case 'four_stars':re=4;break;
case 'five_stars':re=5;break;
}
return re;
}
</script>
<style type="text/css">
<!--
.star_rating {float:left;display:block;list-style:none;margin:-1px 0 0 -1px; padding:0; width:80px; height:16px; position:relative; background:url(images/white.jpg) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:16px;height:16px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(images/yellow.jpg) 0 16px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:16px;}
.star_rating a.two_stars{left:16px;}
.star_rating a.two_stars:hover{width:32px;}
.star_rating a.three_stars{left:32px;}
.star_rating a.three_stars:hover{width:48px;}
.star_rating a.four_stars{left:48px;}
.star_rating a.four_stars:hover{width:64px;}
.star_rating a.five_stars{left:64px;}
.star_rating a.five_stars:hover{width:80px;}
-->
</style>
</head>
<body>
<div style="display:block;float:left;width:100px;"><span>*</span> 总体评价：</div>
<ul class="star_rating">
<li><a href="javascript:void(0)" title="1 of 5 stars" class="one_star">1</a></li>
<li><a href="javascript:void(0)" title="2 of 5 stars" class="two_stars">2</a></li>
<li><a href="javascript:void(0)" title="3 of 5 stars" class="three_stars">3</a></li>
<li><a href="javascript:void(0)" title="4 of 5 stars" class="four_stars">4</a></li>
<li><a href="javascript:void(0)" title="5 of 5 stars" class="five_stars">5</a></li>
<li style="display:none;">
<input type="hidden" id="stars" value="" />
</li>
</ul>
<span id="selectStars" style="padding-left:10px;">（最高为5星）</span>
</div>
</body>
</html>
分享到：
相关推荐
jQuery星星评分插件就是这样一个工具，它允许用户通过鼠标滑动在星星上进行评分，既适用于桌面端，也完美支持移动端。下面将详细介绍这个插件的工作原理和实现方式。 首先，jQuery星星评分插件的核心是JavaScript库...
《jQuery小星评级系统代码详解》 在网页交互设计中，评级系统是常见的功能之一，它可以帮助用户对产品、服务或者内容进行评价，通常以星星的数量来表示。本篇文章将详细解析一个基于jQuery实现的小星评级系统代码，...
而"jQuery实现星星评价效果demo"可能是包含实现这个功能的HTML、CSS和JavaScript代码的文件，开发者可以通过查看和运行这个文件来学习和理解具体的实现细节。 总之，这个示例项目提供了一个实用的前端组件，展示了...
利用jQuery，我们可以更高效地实现页面元素的操作和动态效果，包括构建这个星星评级系统。 描述中提到，该代码“可以完美运行，有能力的还可以二次修改”，这表明这个评级系统不仅具备完整的功能，而且具有良好的可...
现在，我们使用jQuery编写JavaScript代码来实现滑动评分功能。我们需要监听鼠标进入和离开星星的事件，以及鼠标在星星上移动时的事件。当鼠标移动时，我们将改变经过的星星的选中状态。 ```javascript $(document)....
`js`目录中的文件则包含了实现星星评级功能的JavaScript代码。这个文件可能被命名为`rating.js`或其他有意义的名字。在代码中，开发者会使用jQuery选择器找到HTML中的评级元素，然后添加事件监听器，如点击事件，以...
Bootstrap响应式jQuery星星评分插件是一种常见的用户反馈和评价机制，广泛应用于网站和应用程序中，为用户提供直观、易于操作的评级体验。这个插件利用了流行的前端框架Bootstrap的响应式设计，确保在不同设备和屏幕...
3. **jQuery事件**：核心的jQuery代码主要用于监听鼠标事件。`mousedown`事件开始评级过程，`mousemove`事件用于更新评级值，而`mouseup`事件则结束评级并保存最终选择。在这些事件处理函数中，我们需要计算鼠标位置...
总的来说，"CSS3图标星星评级特效.zip"是一个结合了CSS3、可能的JavaScript（jQuery）技术的实例，展示了如何利用现代Web技术创建交互性和视觉吸引力并重的网页元素。学习和应用这个特效可以帮助开发者提高他们的...
响应式jQuery星星评分插件，如"Bootstrap Star Rating"，是一种常见的用户反馈工具，常用于网站评论、产品评价或服务评级等场景。该插件基于流行的前端框架Bootstrap，结合jQuery库，提供了一种灵活且直观的五星级...
本文将深入探讨“jquery评级和登录弹出层”这一主题，基于ASP.NET开发并结合自定义的jQuery插件实现。 首先，我们关注的是“jquery评级”功能。在网页中，评级系统通常用于让用户对内容进行评分，如电影、产品或...
它常见于各大电商平台、社交媒体和各类服务评价系统中，允许用户通过点击或悬停在星星上给予1到5（或更多）的评级。本文将深入探讨如何利用jQuery库与.NET后端技术来实现这一功能。 ### 1. jQuery简介 jQuery是一...
**jQuery星形评级系统**是一种常见于网页应用中的交互元素，用于用户对商品、服务或内容进行评分。这种系统通常由一系列的星星图标组成，用户可以通过点击或悬停在星星上选择他们想要给出的评分。在本文中，我们将...
此合集聚焦于jQuery和JavaScript实现的星星评价控件，提供了多种样式和评分规则，适用于各种在线评级场景，如产品评价、服务评分等。 jQuery和JavaScript是Web开发中广泛使用的两种技术。jQuery是一个轻量级的...
当用户与评级元素交互时，jQuery可以改变对应星星的填充状态，从而展示用户选择的评级等级。这通常涉及到修改SVG元素的`fill`属性，以改变颜色或透明度。 为了创建平滑的过渡效果，我们可以利用jQuery的动画功能。...
在本案例中，我们关注的是一个基于jQuery实现的动态星星评价系统，它具有实用性且代码易于修改。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在动态...
本教程将深入探讨如何利用SVG（Scalable Vector Graphics）技术和jQuery库来创建一款优雅的评级特效。 首先，SVG是一种基于XML的矢量图像格式，支持丰富的图形绘制，并且可以被浏览器直接解析，无需额外的插件。SVG...
在给定的资源中，“asp 简单易用的星星评分/评级 有注释”是一个利用ASP技术实现的星星评分系统，适用于产品评价或服务质量评估，类似于淘宝等电商平台上的用户反馈机制。 该系统的核心功能是让用户通过选择星星的...
在五星评级系统中，jQuery可以帮助我们快速选择HTML元素，例如，我们可以使用`$(".star")`来选取所有表示星星的元素。然后，我们可以通过`.click()`、`.hover()`等方法添加事件监听器，实现用户点击或悬停时的动态...