javascript Taobao 별점 단순화된 버전_javascript 기술

[프로그램 소스코드]
이 효과는 주로 CSS와 자바스크립트의 협력에 반영됩니다
CSS 코드

코드 복사 코드는 다음과 같습니다:

ul, li {margin: 0; border: 0;}
.shop-rated {
height: 25px
overflow; : 숨겨진;
배율: 1;
위치: 상대;
글꼴:12px
색상:#000;
line-height:1.2em
}
.shop-등급 범위 {
height: 23px;
display: block
line-height:
float: 왼쪽;
}
.shop-등급 범위.제목 {
너비: 125px
텍스트 정렬: 오른쪽
마진 오른쪽:
}
상점 등급 ul {
float: 왼쪽;
}
.shop-rated .result {
여백-왼쪽: 20px;
padding-top: 2px; >.shop -등급 .result 범위 {
색상: #ff6d02;
}
.등급-수준,
.등급-수준 a {
배경: url(http://files .jb51.net/demoimg/201007/o_star.png) 반복 없음 스크롤 1000px 1000px;
}
.rated-level {
배경 위치: 0px 0px>폭: 120px; 🎜>높이: 23px;
위치: 상대;
z-색인:
}
.shop-rated .result em {
색상:
family: arial ;
font-weight:
}
.rated-level li {
display: inline
}
.rated-level a {
라인 -높이: 23px;
위치: 절대;
왼쪽: 0px;
*zoom: ;
개요: 없음
}
.등급 a.별표 {
폭: 20%
z-지수:
}
등급 수준 a.two-stars {
폭: 40%;
z-지수: 5
}
.등급 수준 a.two-stars {
폭: 60% ;
z-지수: 4;
}
.등급 a.4-별 {
폭: 80%
z-지수:
}
.등급 -레벨 a.별 5개 {
폭: 100%;
z-지수: 2
}
.등급-수준 .현재-등급, .등급-수준 a: hover {배경 -위치:0 -28px}
.등급 수준 a.one-star:hover,.등급 수준 a.two-stars:hover,.등급 수준 a.one-star.현재-등급 ,.등급 -수준 a.two-stars.현재-등급{배경-위치:0 -116px;}
.등급-수준 .3-별 .current-등급,.등급-수준 .4-별 .current -등급, .등급 수준 .5개 별 .현재 등급{배경 위치:0 -28px;}


HTML 구조




코드 복사

코드는 다음과 같습니다.

당신 말이 맞습니다. 제품 평가:

• 20
• 40
• 60
• 80

100

< /span>

🎜>
자바스크립트 코드




코드 복사


코드는 다음과 같습니다.

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, rider, hid, config) {
var lis = T$$(T$(cid), 'li'), curA ;
for (var i = 0, len = lis.length; i lis[i]._val = i;
lis[i].onclick = function() {
T$(rid).innerHTML = '' (T$(hid).value = T$$(this, 'a')[0].getAttribute('star:value')) '分 - ' 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': '현재 등급',
'단계': 20
});

代码演示:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>娣</title>