JavaScript淘宝星評価簡易版_JavaScriptスキル

【プログラムソースコード】
この効果は主にCSSとJavaScriptの連携で反映されます
CSSコード

コードをコピー コードは次のとおりです:

ul, li {margin: 0; padding: 0; border: 0;}
height: 25px; : 非表示;
ズーム: 1;
位置: 999;
カラー:#000;
行の高さ: 1.2em
}
.shop-rated スパン {
高さ: 23 ピクセル;
表示: ブロック;
行の高さ: 23 ピクセル;左;
}
.shop-rated span.title {
幅: 125px;
テキスト整列: 右;
}
。ショップ評価 ul {
float: left;
}
.shop-rated .result {
margin-left: 20px;
padding-top: 2px; >.shop -評価 .結果スパン {
色: #ff6d02;
}
.評価レベル、
.評価レベル a {
背景: url(http://files .jb51.net/demoimg/201007/o_star.png) 繰り返しなしのスクロール 1000px 1000px;
背景位置: 0px 0px; 🎜>高さ: 23px;
位置: 相対;
z-index: 1000;
.result em {
color:
font-ファミリー: arial ;
フォントの太さ: 太字
}
.評価レベル li {
表示:
}
.評価レベル a {
-高さ: 23px;
位置: 絶対;
左: 0px; ;
アウトライン: なし;
}
.評価レベル a.one-star {
幅: 20%;
}
。評価レベル a.two-stars {
幅: 40%;
z-index: 5;
.評価レベル a.three-stars {
幅: 60% ;
z-index: 4;
}
.評価レベル a.four-stars {
width: 80%;
}
.評価 - レベル a.five-stars {
幅: 100%;
z-index: 2;
}
.評価レベル .current-評価、 .評価レベル a: hover {background -position:0 -28px}
.評価レベル a.one-star:hover,.評価レベル a.two-stars:hover,.評価レベル a.one-star.current-rated ,.評価レベル a.two-stars.current-rated{background-position:0 -116px;}
.評価レベル .three-stars .current-評価,.評価レベル .four-stars .current -評価、.評価レベル .five-stars .current-rated{background-position:0 -28px;}


HTML 構造




コードをコピーします


コードは次のとおりです:

あなたは正しいです 製品評価:

20

40

/a>

80

100

< /span>

🎜>
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 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': ' current-racing',
'step': 20
});

代演演示:

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