最近一个小项目需要一个星级评分的效果,所以去淘宝偷了一个,但是还得加载YUI很不爽,还是自己动手写一个吧~
HTML:
<!--
# 星级评分
# 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 星级评分 -->
CSS:
/* 星级评分 */
.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;padding-top:2px;}
.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;}
结构和样式是偷淘宝的!!
JS:
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 || {});
}
}
基本上注释里已经写的很清楚了!我没什么可说的了!欢迎大家继续改进!!
演示请看附件!
分享到:
相关推荐
在本文中,我们将深入探讨如何使用纯JavaScript实现一个仿照淘宝星星评分效果的功能。这个功能在电商网站上非常常见,它允许用户通过选择星星数量来给出商品或服务的评价。以下是一些关键知识点: 1. **HTML结构**...
【标题】"仿淘宝评分插件jquery星星评分插件"是一个基于jQuery库开发的前端组件,主要用于实现类似于淘宝网站上的用户评价系统。该插件通过显示星星图标,让用户能够直观地进行评分,同时提供了一种互动式的用户体验...
星级评分系统,Ajax仿淘宝网星级评分系统,Ajax无刷新投票模块,基于JavaScript技术实现,模块内置的评分标语(可以修改): "很不满意|差得太离谱,与卖家描述的严重不符,非常不满", "不满意|部分有破损,与...
综上所述,实现一个仿淘宝的星级评分系统涉及前端界面设计、后端数据处理、用户交互、安全防护等多个环节。这个系统不仅可以直观地展示商品的满意度,还能为用户提供有价值的购物参考,对电商平台的运营至关重要。在...
【标题】"仿淘宝滑动星星评价"是一个基于jQuery实现的网页交互效果,它模仿了淘宝网站上常见的商品评价系统,让用户可以通过滑动鼠标来选择不同星级的评价。这种效果通常用于电商平台,增加用户在评价商品时的互动性...
ShopEx滑动星星评分插件是一种常见的电商网站评价系统,其设计灵感来源于淘宝网的五星级评价机制。这种插件通常用于在线商店,允许用户通过鼠标滑动或点击星星图标来给商品或服务打分,从而提供直观的反馈。下面我们...
"仿淘宝购物评分"是一种借鉴了淘宝网评分机制的设计方案,旨在为商城商品提供一个直观、易懂且具有参考价值的评分体系。该系统通常包括商品评分、商家服务评分和物流服务评分三个主要部分,以便用户能够全面了解购买...
通过这种方式,你可以自由地调整星级评分条的视觉效果,包括星星的形状、大小、颜色以及透明度。同时,你还可以通过Java代码动态改变RatingBar的属性,例如: ```java RatingBar ratingBar = findViewById(R.id....
星星评分效果是网页设计中常见的用户反馈元素,用于让用户对产品或服务进行直观的评价。在互联网产品中,这种交互方式被广泛应用,如电影评分、商品评价等场景。本篇文章将详细探讨几种星星评分效果的实现插件及其...
在IT行业中,构建一个仿淘宝星星评价系统是常见的需求,特别是在电商网站开发中。这个系统主要目的是为了提供用户对商品或服务的可视化反馈,通过星星的数量来表达满意程度。淘宝作为中国最大的电商平台之一,其评价...
本项目名为"仿淘宝星星评论打分样式,可ajax同步到数据库",它旨在模仿淘宝网的五角星评分机制,允许用户为商品或服务进行打分,并实时通过AJAX技术将这些评价数据同步到后端数据库。下面将详细讲解这个系统的核心...
在IT行业中,构建一个仿淘宝的五星级评价系统是一项常见的需求,它可以帮助电商平台提供类似淘宝的用户反馈体验,促进商品的销售与服务质量的提升。淘宝的五星级评价系统是其用户体验的重要组成部分,它允许用户根据...
在IT行业中,网页交互设计是用户体验的关键因素之一,而“js仿淘宝的星星评价”就是一个典型的实例,展示了如何使用HTML、CSS和JavaScript技术来实现一个动态的用户评价系统,类似于淘宝网上的商品评价功能。...
在电商网站中,评论系统是提升用户体验、增加互动性的重要组成部分,而"仿淘宝滑动星星评论插件"则是Shopex为用户提供的一个增强评论功能的工具。 这个插件的主要目标是模仿淘宝网的星级评价系统,淘宝作为中国最大...
本教程将详细讲解如何利用jQuery实现一个仿淘宝商品的星星评价系统。 首先,我们需要理解淘宝商品评价系统的核心功能。用户在购买商品后,可以对商品进行星级评价,通常是从一星到五星,每颗星代表不同的满意度等级...
在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)环境中实现一个仿淘宝评级控件,该控件能够展示用户评价的星级。这个控件是通过绘制五角星来模拟淘宝购物平台上的商品评分系统,它允许用户...
1. `starRate.gif`:这可能是一个动态或者静态的GIF图像,用于表示星星评分,用户可以通过点击星星来选择他们想要给出的分数。这种交互设计常见于许多电商网站,使用户可以直观地进行打分操作。 2. `star.gif`:与`...
综上所述,实现一个Android仿淘宝商品详情页涉及到多个方面的技术,包括布局设计、组件交互、数据处理、动画效果以及性能优化等。通过合理的设计和编码,可以构建出一个功能丰富且用户体验良好的商品详情页面。
- **样式属性**:设置颜色、大小、布局等,如`color`、`font-size`、`background-color`等,使评分星星看起来更像淘宝的样式。 - **伪类与伪元素**:如`:checked`用于表示复选框或单选按钮已被选中,可以模拟星星...
`onload`事件用于页面加载完成后,即DOM完全加载之后,执行`changebg()`函数,初始化页面上的评分效果。 4. JavaScript函数的使用: - `changebg()`函数:它是通过`onload`事件绑定的函数,用来为每个`td`单元格...