仿淘宝，天猫评分效果
仿淘宝，天猫评分效果本文关键字词：淘宝js评分，天猫js评分
源码：<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>JS评分效果</title>
<style>
*{margin:0;padding:0;}
.pingfen{ width:220px;margin:10px auto;height:28px;}
.pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}
.pingfen span{height: 28px;line-height: 28px;float: right;font-size: 18px;}
</style>
</head>
<body>
<div id="pingfen" class="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="text"></span>
</div>
<div id="pingfen2" class="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="text"></span>
</div>
<div id="pingfen3" class="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="text"></span>
</div>
<script>
window.onload=function(){
function score(id){
var oPf=document.getElementById(id);
var aLi=oPf.getElementsByTagName('li');
var oText=oPf.getElementsByTagName('span');
var description = ['失望','不满','一般','满意','惊喜',]
var i=0;
for(i=0;i<aLi.length;i++){
aLi.index=i;
aLi.onmouseover=function(){
for(i=0;i<aLi.length;i++){
if(i<=this.index)
{
// console.log(i,this.index);
aLi.style.backgroundPosition="0 -29px";
oText.innerText=(this.index+1)+'分 '+description;
}
else
{
aLi.style.backgroundPosition="0 0";
}
// if()
}
};
aLi.onmouseout=function (){
oText.innerText='';
};
aLi.onmousedown=function ()
{
// alert('提交成功:'+(this.index+1)+'分');
oText.innerText=(this.index+1)+'分 '+description;
};
}
}
score('pingfen');
score('pingfen2');
score('pingfen3');
};
</script>
</body>
</html>
素材图片：
页:
[1]