1. 前言
此方案受到JS单行写一个评级组件启发，自己写了一个简单Demo。
功能有正常滑动，动态显示实心星星个数；当点击确认，则保持当前的实心星星个数；再移动时未点击，则离开后还是保持之前的状态。
此demo没有文字信息等提示，可以根据需要自行添加使用。
2. 代码
<!DOCTYPE html>
<html>
<head>
<title>Star Rating</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var lastStarNum =0;
function mOut(obj){
obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum);
}
function mOver(){
var obj = document.getElementById("starRate");
var offsetTopVal = obj.offsetTop;
var pos=getPos(event);
//star width is 13.2px,first star is offset 8px from left, near half of star, the star will just become black.
//6 is adjust parameter
var i = Math.floor((pos.x + 6)/13.2);
//star height is 21px
if(i <= 5 & i > 0&& pos.y < offsetTopVal + 21 && pos.y > offsetTopVal){
obj.innerHTML="★★★★★☆☆☆☆☆".slice(5-i,10-i);
//console.log("MousePage(x,y)=("+pos.x+" ,"+pos.y+") starNumber="+Math.floor((pos.x+6)/13.2));
$(obj).click(function(){
lastStarNum = i;
})
}
}
$('*').mousemove(function(){
mOver();
});
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
</script>
</head>
<body>
<div>Star Rating:</div>
<div id="starRate" onmouseover="mOver()" onmouseout="mOut(this)" style="66px;height:21px">☆☆☆☆☆</div>
</body>
</html>
3.效果
4. 总结
亮点在于"★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum) 的使用，而不需要网上大多数的星级评分系统那样是5个li元素，然后加个class来控制。