类似淘宝五星评分
html + css +js
html 分数由selectvalue控制
<div id="xzw_starSys" class="starGroup"> <div id="xzw_starBox"> <ul class="star"> <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li> <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li> <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li> <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li> <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li> </ul> <div class="current-rating"></div> </div> <input type="hidden" class="selectValue" value="@Html.Raw(healthItem.Grade)" /> </div>
js
//star $(document).ready(function(){ var stepW = 24; var description = new Array(1星, 2星, 3星, 4星,5星); var liS = $(".starGroup"); var descriptionTemp; liS.each(function (i,item) { var stars = $(item).find(".star > li"); stars.each(function (i) { $(stars[i]).click(function (e) { var n = i + 1; $(item).find(".current-rating").css({ "width": stepW * n }); descriptionTemp = description[i]; $(this).find('a').blur(); $(item).find(".description").text("当前评分" + descriptionTemp); $(item).find(".selectValue").val(i + 1); //点击时改变selectValue descriptionTemp = $(item).find(".description").text() return stopDefault(e); return descriptionTemp; }); }); var selectedValue=$(item).find(".selectValue").val(); $(item).find(".current-rating").css({ "width": stepW * selectedValue }); if (selectedValue != 0) { //已进行过评分后才显示，默认0时不显示 $(item).find(".description").text("当前评分：" + description[selectedValue-1]); } stars.each(function(i){ $(stars[i]).hover( function () { descriptionTemp = $(item).find(".description").text(); $(item).find(".description").text(description[i]); }, function(){ if (descriptionTemp != null) { $(item).find(".description").text(descriptionTemp); } else { $(item).find(".description").text(" "); } } ); }); }); }); function stopDefault(e){ if(e && e.preventDefault) e.preventDefault(); else window.event.returnValue = false; return false; };css
@charset "utf-8"; *{font:normal 12px/2em '微软雅黑';padding:0;margin:0} ul,li{list-style:none} a{ color:#09f;} /*容器*/ #xzw_starSys{width:100%;height:30%;/*border:1px solid #ccc;*/padding:2px;margin:2px auto} #xzw_starBox{position:relative;width:100%;} /**/ #xzw_starSys .description{clear:both;padding:10px 0px} #xzw_starSys .star{height:20px;width:120px;position:relative;background:url(../images/123.png) repeat-x;cursor:pointer} #xzw_starSys .star li{float:left;padding:0px;margin:0px} #xzw_starSys .star li a{display:block;width:24px;height:20px;overflow:hidden;text-indent:-9999px;position:absolute;z-index:5} #xzw_starSys .star li a:hover{background:url(../images/123.png) 0 -25px repeat-x;z-index:3;left:0} #xzw_starSys .star a.one-star{left:0} #xzw_starSys .star a.one-star:hover{width:24px} #xzw_starSys .star a.two-stars{left:24px} #xzw_starSys .star a.two-stars:hover{width:48px} #xzw_starSys .star a.three-stars{left:48px} #xzw_starSys .star a.three-stars:hover{width:72px} #xzw_starSys .star a.four-stars{left:72px} #xzw_starSys .star a.four-stars:hover{width:96px} #xzw_starSys .star a.five-stars{left:96px} #xzw_starSys .star a.five-stars:hover{width:120px} #xzw_starSys .current-rating{background:url(../images/123.png) 0 -25px repeat-x;position:absolute;height:20px;z-index:1;top:0;left:0}使用图片：
效果图：
