网上看到的一个星级评分插件，觉得写的非常不错，对其原理进行分析。从代码来看最主要的是使用css样式的background-position属性
background-position -20 -20表示背景图向左移动20px、向上移动20px
background-position 20 20表示背景图向右移动20px、向下移动20px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.starbox{width:480px;margin:20px auto;height:30px;border:0px solid red;}
.s_name{float:left;display:block;width:60px;text-align:right;}
/*定义颗小星星为没有选中的*/
.star_ul{background:url(images/star.png) no-repeat 0 -150px;width:132px;z-index:10;position:relative;height:25px;border:0px solid yellow;}
.star_ul li{float:left;margin-right:1px;width:25px;height:25px;border:0px solid blue;}
.star_ul li a{display:block;height:25px;position:absolute;left:0;top:0;text-indent:-999em;}
/*定义背景图*/
.star_ul li .active-star{background:url(images/star.png) no-repeat;}
/*定义每个背景图的位置*/
.star_ul li .one-star{width:25px;background-position:0 -120px;z-index:50;}/*背景图水平位置不动，垂直位置移动50像素，也就是左边不动向上移动120像素 -120px表示向上移动*/
.star_ul li .two-star{width:51px;background-position:0 -90px;z-index:40;}/*背景图水平位置不动，左边不动向上移动90像素 -90px表示向上移动*/
.star_ul li .three-star{width:79px;background-position:0 -60px;z-index:30;}/*背景图水平位置不动，左边不动向上移动60像素 -60px表示向上移动*/
.star_ul li .four-star{width:105px;background-position:0 -30px;z-index:20;}/*背景图水平位置不动，左边不动向上移动30像素 -30px表示向上移动*/
.star_ul li .five-star{width:129px;margin-right:0;background-position:0 0;z-index:10;}
.s_result{padding:6px 0 0 5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var flag = 1;
$('.star_ul a').hover(function(){
flag = 1;
$('.star_ul a').removeClass('active-star');
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
},function(){
if( flag == 1){
$(this).removeClass('active-star');
$('.s_result').css('color','#333').html('请打分')
}
});
$('.star_ul a').click(function(){
flag = 2;
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
});
$('.square_ul a').hover(function(){
flag = 3;
$('.square_ul a').removeClass('active-square');
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title'))
},function(){
if(flag == 3){
$(this).removeClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#333').html('请打分')
}
});
$('.square_ul a').click(function(){
flag = 4;
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title')) });
})
</script>
</head>
<body>
<div class="starbox">
<span class="s_name">总体评价：</span>
<ul class="star_ul fl">
<li><a class="one-star" title="很差" href="#"></a></li>
<li><a class="two-star" title="差" href="#"></a></li>
<li><a class="three-star" title="还行" href="#"></a></li>
<li><a class="four-star" title="好" href="#"></a></li>
<li><a class="five-star" title="很好" href="#"></a></li>
</ul>
<span class="s_result fl">请打分</span>
</div>
<div class="starbox">
<span class="s_name">口味：</span>
<ul class="square_ul fl">
<li><a class="square-1" title="差" href="#"></a></li>
<li><a class="square-2" title="一般" href="#"></a></li>
<li><a class="square-3" title="好" href="#"></a></li>
<li><a class="square-4" title="很好" href="#"></a></li>
<li><a class="square-5" title="非常好" href="#"></a></li>
</ul>
<span class="s_result_square fl">请打分</span>
</div>
<div class="starbox">
<span class="s_name">环境：</span>
<ul class="square_ul fl">
<li><a class="square-1" title="差" href="#"></a></li>
<li><a class="square-2" title="一般" href="#"></a></li>
<li><a class="square-3" title="好" href="#"></a></li>
<li><a class="square-4" title="很好" href="#"></a></li>
<li><a class="square-5" title="非常好" href="#"></a></li>
</ul>
<span class="s_result_square fl">请打分</span>
</div>
</body>
</HTML>
相关推荐
**jQuery 星级评分插件详解** 在Web开发中，为用户提供直观的反馈和互动是至关重要的，其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和动画等功能，使得创建...
**jQuery星级评分插件——Raty详解** 在Web开发中，提供用户友好、直观的界面是至关重要的。其中，星级评分系统是常见的交互元素，用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件，它使得在网页...
**基于SVG的jQuery星级评分插件-jRate** 在Web开发中，用户界面的交互性和视觉效果对于提升用户体验至关重要。`jRate`是一个优秀的jQuery插件，它专门用于创建基于SVG的星级评分系统。这个插件使得开发者能够轻松地...
jQuery星级评分插件是一种在网页上实现用户评分功能的JavaScript工具，主要基于广泛使用的jQuery库。这个插件设计小巧，加载快速，使得它在各种网页应用中都能高效地工作，尤其是那些对性能有较高要求的场景。其核心...
【标题】"仿淘宝评分插件jquery星星评分插件"是一个基于jQuery库开发的前端组件，主要用于实现类似于淘宝网站上的用户评价系统。该插件通过显示星星图标，让用户能够直观地进行评分，同时提供了一种互动式的用户体验...
ShopEx滑动星星评分插件是一种常见的电商网站评价系统，其设计灵感来源于淘宝网的五星级评价机制。这种插件通常用于在线商店，允许用户通过鼠标滑动或点击星星图标来给商品或服务打分，从而提供直观的反馈。下面我们...
在IT行业中，jQuery星星评分插件是一种常见的交互元素，常用于网站评论、产品评价或用户反馈等场景。这种插件允许用户通过点击或滑动鼠标选择一个星数来表达他们的满意度或评分。以下是对该主题的详细阐述： 一、...
**jQuery Raty星级评分插件**是一个用于网页交互设计中的评价和评分功能的JavaScript插件。这个插件基于广泛使用的**jQuery**库，为开发者提供了一种简单且可定制的方式来实现用户友好的星级评分系统。它允许用户...
在实际应用中，这个【满意度jQuery星星评分插件】可以与其他前端框架（如Bootstrap、AngularJS等）配合使用，也可以独立部署在任何支持jQuery的网页上。通过合理的布局和交互设计，它能够有效地提升用户对网站或应用...
**jQuery星级评分插件**是一种常用的前端交互组件，主要用于用户评价、反馈或评分场景，如电商商品评价、电影评分等。这种插件基于JavaScript库jQuery，利用其强大的DOM操作和事件处理能力，能够轻松实现动态的星级...
在这个星级评分插件中，回调函数被用来捕获用户的选择，当用户点击星星时，回调函数会被调用，并传入用户选择的星星数量。开发者可以通过监听这个回调函数，实现将用户评分保存到数据库、更新UI或其他业务逻辑。 ...
Bootstrap响应式jQuery星星评分插件是一种常见的用户反馈和评价机制，广泛应用于网站和应用程序中，为用户提供直观、易于操作的评级体验。这个插件利用了流行的前端框架Bootstrap的响应式设计，确保在不同设备和屏幕...
**jQuery鼠标滑动星级评分插件详解** 在Web开发中，用户交互是提升用户体验的关键因素之一，其中星级评分系统是一个常见的交互元素，常用于产品评价、用户反馈等场景。jQuery作为一个轻量级、功能强大的JavaScript...
在本文中，我们将深入探讨如何使用jQuery来创建一个自定义的星级评分插件。这个插件可以帮助用户在网站上轻松地进行评分和反馈，常见于评论系统、产品评价或者服务评级等场景。以下是对实现这一功能所需技术的详细...
DEDECMS5.7星星评分插件是一款专为织梦内容管理系统（DEDECMS v5.7）设计的扩展组件，旨在为网站内容提供一种直观、用户友好的评分功能。这款插件允许访客对文章、产品或其他内容进行打分，以五角星的形式展示，从而...
"jQuery星星评分插件"就是这样一个工具，它能够为网站添加美观且易于使用的评分系统，让用户可以直观地给出他们对产品或服务的评价。这个插件通常用于电商网站、评论板块、电影评分等场景，提高了用户参与度和网站的...
在网页设计中，用户交互是至关重要的，而jQuery星级评分插件就提供了这样一种直观、友好的用户体验方式，让用户能够轻松地对内容进行评分。本文将深入探讨4款简单实用的jQuery星级评分插件，以及如何调整它们的样式...
在这个星级评分插件中，jQuery可能用于监听用户的鼠标事件（如鼠标悬停、点击），动态改变星星的选中状态，并将用户的评分数据发送到服务器或者显示在页面上。 【CSS】：CSS（层叠样式表）用于定义网页的布局和样式...
《jQuery Raty：星级评分插件详解》 在网页交互设计中，用户评分系统是一个常见的功能，它能够直观地展示用户对产品或服务的满意度。jQuery Raty是一款强大的星级评分插件，以其易于使用和高度可扩展性在开发社区中...