javascript淘宝评星简版

 更新时间:2010年07月06日 23:51:52   作者:  
基本js实现的星星投票选择功能代码。
【程序源码】
这个效果主要体现在CSS和javascript的配合上
CSS代码
复制代码 代码如下:

ul, li {margin: 0; padding: 0; border: 0;}
.shop-rating {
height: 25px;
overflow: hidden;
zoom: 1;
padding: 2px 0;
position: relative;
z-index: 999;
font:12px Arial;
color:#000;
line-height:1.2em
}
.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;
}
.shop-rating .result {
margin-left: 20px;
padding-top: 2px;
}
.shop-rating .result span {
color: #ff6d02;
}
.rating-level,
.rating-level a {
background: url(//img.jbzj.com/demoimg/201007/o_star.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
background-position: 0px 0px;
width: 120px;
height: 23px;
position: relative;
z-index: 1000;
}
.shop-rating .result em {
color: #f60;
font-family: arial;
font-weight: bold;
}
.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;}

HTML结构
复制代码 代码如下:

<div class="shop-rating">
<span class="title">你对我人品的评价:</span>
<ul class="rating-level" id="stars2">
<li><a href="javascript:void(0);" class="one-star" star:value="20">20</a></li>
<li><a href="javascript:void(0);" class="two-stars" star:value="40">40</a></li>
<li><a href="javascript:void(0);" class="three-stars" star:value="60">60</a></li>
<li><a href="javascript:void(0);" class="four-stars" star:value="80">80</a></li>
<li><a href="javascript:void(0);" class="five-stars" star:value="100">100</a></li>
</ul>
<span id="stars2-tips" class="result"></span>
<input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>

Javascript代码
复制代码 代码如下:

var TB = function() {
var T$ = function(id) { return document.getElementById(id) }
var T$$ = function(r, t) { return (r || document).getElementsByTagName(t) }
var Stars = function(cid, rid, hid, config) {
var lis = T$$(T$(cid), 'li'), curA;
for (var i = 0, len = lis.length; i < len; i++) {
lis[i]._val = i;
lis[i].onclick = function() {
T$(rid).innerHTML = '<em>' + (T$(hid).value = T$$(this, 'a')[0].getAttribute('star:value')) + '分</em> - ' + config.info[this._val];
curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1];
};
lis[i].onmouseout = function() {
curA && (curA.className += config.curcss);
}
lis[i].onmouseover = function() {
curA && (curA.className = curA.className.replace(config.curcss, ''));
}
}
};
return {Stars: Stars}
}().Stars('stars2', 'stars2-tips', 'stars2-input', {
'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊'],
'curcss': ' current-rating',
'step': 20
});

代码演示:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JS数组及对象遍历方法代码汇总

    JS数组及对象遍历方法代码汇总

    这篇文章主要介绍了JS数组及对象遍历方法代码汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 七个很有意思的PHP函数

    七个很有意思的PHP函数

    这篇文章主要介绍了七个很有意思的PHP函数,这些函数鲜为人知,但很实用,需要的朋友可以参考下
    2014-05-05
  • 从Immutable.js到Redux函数式编程

    从Immutable.js到Redux函数式编程

    这篇文章主要为大家介绍了从Immutable.js到Redux函数式编程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 基于prototype扩展的JavaScript常用函数库

    基于prototype扩展的JavaScript常用函数库

    基于prototype扩展的JavaScript常用函数库实现代码,学习js的朋友可以参考下。
    2010-11-11
  • JavaScript输入分钟、秒倒计时技巧总结(附代码)

    JavaScript输入分钟、秒倒计时技巧总结(附代码)

    这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现,通过css和js代码展示了逻辑过程,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 浅析Javascript中bind()方法的使用与实现

    浅析Javascript中bind()方法的使用与实现

    下面小编就为大家带来一篇浅析Javascript中bind()方法的使用与实现。小编觉得挺
    2016-05-05
  • 读懂CommonJS的模块加载

    读懂CommonJS的模块加载

    这篇文章主要介绍了CommonJS的模块加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript原型链继承用法实例分析

    javascript原型链继承用法实例分析

    这篇文章主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

    JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

    我们用了5篇文章来讨论如何编写一个JavaScript异步调用框架(问题 & 场景、用例设计、代码实现、链式调用、链式实现),现在是时候让我们看一下在各种常见开发情景中如何使用它了。
    2009-08-08
  • Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架,今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap,bootstrap深受大家喜爱的原因到底是什么呢,我们一探究竟。
    2015-11-11

最新评论