五星评分

来源：互联网发布：永恒之塔5.0人物数据编辑：程序博客网时间：2024/04/28 15:54

类似淘宝五星评分

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>

//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}

使用图片：

效果图：

0 0