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 parametervar i = Math.floor((pos.x + 6)/13.2);
//star height is 21pxif(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="width:66px;height:21px">☆☆☆☆☆</div></body></html>3. 总结
亮点在于"★★★★★☆☆☆☆☆".slice(5-lastStarNum,10-lastStarNum) 的使用，而不需要网上星级评分系统那样是5个li元素。
js实现星级评分效果（最短代码）
原文地址：http://www.cnblogs.com/fanbi/p/7596102.html