仿淘宝星级评分效果
2013-09-02 10:25
344 查看
<!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>
<style type="text/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;}
.shop-rating span.title {margin:0px 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 {url(images /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="100" href="#">100</a></li>
<li><a class="two-stars" star:value="200" href="#">200</a></li>
<li><a class="three-stars" star:value="300" href="#">300</a></li>
<li><a class="four-stars" star:value="400" href="#">400</a></li>
<li><a class="five-stars" star:value="500" href="#">500</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="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="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<!-- END 星级评分 -->
<input type="button" value="test" />
<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]. = function(){
if (flag < 999){
var reg = RegExp(nowClass, "g");
starlist[flag].className = starlist[flag].className.replace(reg, "");
}
}
starlist[i]. = 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>参考：
http://bbs.blueidea.com/thread-2990607-1-1.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript制作淘宝星级评分效果的思路
- [转处blueidea]仿淘宝星级评分效果
- 仿淘宝星级评分效果
- 仿淘宝星级评分效果
- 仿淘宝星级评分效果
- 原生js实现的星级评分效果
- 用css实现星级评分效果
- JS五星级评分效果(类似与淘宝打分效果)
- 仿淘宝，天猫评分效果
- javascript 星级评分效果(手写)
- js实现仿淘宝商品评价的星级评定效果
- jQuery动态星级评分效果实现方法
- 原生js实现的星级评分效果
- jQuery动态星级评分效果实现方法
- 使用CSS绘制星级评分效果的方法
- Js仿淘宝星级评分
- js+css 模仿淘宝评分效果
- jQuery动态星级评分效果实现方法
- Android控件之RatingBar（类似淘宝实现滑动星级评价效果）
- vue 实现类似淘宝星级评分的示例