<!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=gb2312" />
<title>Title</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
<!--
body {background:#fff;text-align:center;margin:0 auto;padding: 0;font:12px Arial;color:#000;line-height:1.2em}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 星级评分 */
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0px;
position: relative;
z-index: 999;
}
.shop-rating span {
height: 23px;
display: block;
line-height: 23px;
float: left;
}
.shop-rating span.title {
width: 125px;
text-align: right;
margin-right: 5px;
}
.shop-rating ul {
float: left;
margin:0;padding:0
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.shop-rating .result strong {
color: #666666;
font-weight: normal;
}
.rating-level,
.rating-level a {
background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
}
.rating-level li {
display: inline;
}
.rating-level a {
line-height: 23px;
height: 23px;
position: absolute;
top: 0px;
left: 0px;
text-indent: -999em;
*zoom: 1;
outline: none;
}
.rating-level a.one-star {
width: 20%;
z-index: 6;
}
.rating-level a.two-stars {
width: 40%;
z-index: 5;
}
.rating-level a.three-stars {
width: 60%;
z-index: 4;
}
.rating-level a.four-stars {
width: 80%;
z-index: 3;
}
.rating-level a.five-stars {
width: 100%;
z-index: 2;
}
.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
-->
</style>
</head>
<body>
<div class="shop-rating">
<span class="title">物流公司的服务：</span>
<ul class="rating-level" id="stars1">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars1-tips"></span>
<input type="hidden" id="stars1-input" name="a" value="" size="2" />
</div>
<!--
# 星级评分
# star:value = 分数
-->
<div class="shop-rating">
<span class="title">物流公司的服务：</span>
<ul class="rating-level" id="stars2">
<li><a class="one-star" star:value="20" href="#">20</a></li>
<li><a class="two-stars" star:value="40" href="#">40</a></li>
<li><a class="three-stars" star:value="60" href="#">60</a></li>
<li><a class="four-stars" star:value="80" href="#">80</a></li>
<li><a class="five-stars" star:value="100" href="#">100</a></li>
</ul>
<span class="result" id="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<!-- END 星级评分 -->
<input type="button" value="test" onclick="teststars()" />
<script type="text/javascript">
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
return false;
}
/**
* 星星打分组件
*
* @author Yunsd
* @date 2010-7-5
*/
var Stars = Class.create();
Stars.prototype = {
initialize: function(star,options) {
this.SetOptions(options); //默认属性
var flag = 999; //定义全局指针
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
var tipsTxt = this.options.tipsTxt; // 定义提示文案
var len = starlist.length; //星星数量
for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
starlist[i].value = i;
starlist[i].onclick = function(e){
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function(){
if (flag< 999){
var reg = RegExp(nowClass,"g");
starlist[flag].className = starlist[flag].className.replace(reg,"")
}
}
starlist[i].onmouseout = function(){
if (flag< 999){
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE){ //FIX IE下样式错误
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c) {
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Input: "",//设置触保存分数的INPUT
Tips: "",//设置提示文案容器
nowClass: "current-rating",//选中的样式名
tipsTxt: ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
};
Extend(this.options, options || {});
}
}
/* For TEST */
function teststars(){
alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]})
var Stars2 = new Stars("stars2")
</script>
</body>
</html>
分享到：
相关推荐
本文将详细讲解如何实现基于jQuery的星级评分效果，这种效果广泛应用于电商平台、评论系统以及各种需要用户给出评价的场景，如淘宝网和口啤网。 首先，实现星级评分效果的核心是利用jQuery的DOM操作和事件监听功能...
"五星评分效果实例"是一个关于如何使用原生JavaScript实现动态星星打分功能的示例。这种功能允许用户通过鼠标滑动或点击星星来给出他们对产品或服务的满意度评价，通常以一到五星的形式展示。 首先，我们要理解...
在星级评分系统中，CSS起到了至关重要的作用，它定义了星星的样式，如颜色、大小、边框、填充等，以及在不同评分状态下（半星、全星或未选中）的视觉效果。CSS还可以用于创建动画效果，如鼠标悬停时星星的渐变或选中...
本资源“多个CSS3实现的动画效果不错的星级评分效果.zip”提供了利用CSS3技术来创建动态、交互式的星级评分效果的实例。下面我们将详细探讨这些CSS3动画效果以及它们在实际应用中的价值。 首先，CSS3（Cascading ...
总的来说，"php+mysql的ajax星星评分脚本"是一个综合性的Web开发实例，展示了如何使用现代Web技术创建一个动态、交互式的用户反馈系统。通过理解Ajax的异步通信、PHP的后端处理和MySQL的数据管理，开发者可以构建出...
实现星级评分功能是常见的用户界面交互，常用于产品评价、用户反馈等场景。 首先，我们需要理解Vue的核心概念，包括组件化、数据绑定和指令。Vue中的组件是可复用的代码块，可以封装HTML、CSS和JavaScript，使得...
在网页设计和开发中，用户界面的交互性是至关重要的，而星级评分系统就是一种常见的交互元素，用于用户对产品或服务进行评价。本压缩包提供的资源是一个强大的JavaScript实现，支持半星、整星以及步长评分功能。下面...
以上就是一个基本的星星评分功能的实现。这个例子中，用户可以点击星星，当鼠标悬停在星星上时，会显示当前选择的评分，而当鼠标离开时，所有星星恢复到未选择状态。你可以根据实际需求调整CSS样式、添加错误处理或...
本Demo是关于在ASP.NET中实现一个简单的评分星星功能，这种功能常见于用户评价系统中，让用户通过点击星星来表达对产品或服务的满意度。这个Demo的核心在于创建一个交互式的用户界面，使得鼠标悬停或点击时可以点亮...
CSS在实现星星评分效果中起着关键作用。通过设置不同状态（如未选中、已选中和鼠标悬停）的样式，可以实现星星的视觉效果。例如，可以设定未选中的星星为灰色，选中的为金色，鼠标悬停时显示半星效果。 接下来，...
标题中的“JavaScript实现简单的星星评分效果”是指使用JavaScript编程语言来创建一个用户界面元素，让用户能够通过选择星星的数量来给出评分。这个效果通常用于在线评价系统，如电影、产品或服务的评分。在这个实例...
CSS用于美化星号和评分展示，使得视觉效果更佳。JavaScript，特别是jQuery库，可能被用来处理用户交互，如监听鼠标点击事件，发送Ajax请求，以及更新页面上的评分显示。 4. **后端开发**：后端主要由PHP组成，负责...
【JavaScript源代码】uniapp实现滑动评分效果 在uniapp开发中，滑动评分功能是一种常见的用户交互设计，允许用户通过滑动手指选择不同等级的评分。本实例将介绍如何利用JavaScript和uniapp框架来实现这个功能。下面...
"jQuery实现星星评价效果demo"是一个关于如何使用jQuery库来创建一个直观且动态的星级评分系统的实例。这个项目适用于那些希望在网站上添加评论评分功能或者产品评级功能的开发者。 首先，jQuery是一个轻量级的...
Android RatingBar星星评分控件实例代码 Android RatingBar星星评分控件是 Android 开发中非常常用的控件，能够让用户进行评分操作。该控件可以在多种场景下使用，例如，评估产品的质量、对服务的满意度评价等。 ...
总结来说，这个简单的星星滑动评分实例是一个交互式的前端组件，它利用HTML、CSS和JavaScript实现了用户友好的评分功能。开发者可以通过自定义样式和JavaScript逻辑，将这个组件无缝集成到自己的网页或应用中，为...
首先，星级评分系统是网站中常见的用户反馈工具，通常用于评价产品、服务或内容的质量。在HTML5的基础上，CSS3可以通过声明式的方式实现各种复杂的视觉效果，包括但不限于渐变、阴影、旋转、缩放、过渡和动画等。在...
星星评分系统在网页设计中是一种常见的用户反馈方式，它允许用户通过直观地选择星数来评价产品、服务或内容的质量。这种系统通常采用JavaScript（JS）实现，因为JS是一种广泛用于网页交互的客户端脚本语言。本文将...
在iOS开发中，用户界面设计是至关重要的，而星星评分组件常常被用于用户评价、商品评分等场景。这个"ios-星星评分,支持整个星和半颗星的评分，同时支持滑动的评分.zip"文件提供了一个实现星星评分功能的类，名为...