html代码片段:
<div class="star_box"> <ul class="star_list fl"> <li class="item"> <div class="wrapper_star"> <img src="../../img/reserve/icon_star_32.png"/> </div> </li> <li class="item"> <div class="wrapper_star"> <img src="../../img/reserve/icon_star_32.png"/> </div> </li> <li class="item"> <div class="wrapper_star"> <img src="../../img/reserve/icon_star_32.png"/> </div> </li> <li class="item"> <div class="wrapper_star"> <img src="../../img/reserve/icon_star_32.png"/> </div> </li> <li class="item"> <div class="wrapper_star"> <img src="../../img/reserve/icon_star_32.png"/> </div> </li> </ul> <div class="star fl">5星</div> </div>
js方法:
// 根据传的几星评价渲染星星 var starRender = function (num) { for (var i = 0; i < Math.ceil(num); i++) { $('.star_list .item .wrapper_star').eq(i).show(); } var temp = num*100 % 100; temp = temp + '%'; $('.star_list .item .wrapper_star').eq( Math.floor(num) ).css('width',temp) } starRender(3.8);
css样式:
.container_motormaninfo .estimate .star_box{ overflow: hidden; position: relative; } .container_motormaninfo .estimate .star_box .star_list { margin-top: 0.14rem; overflow: hidden; } .container_motormaninfo .estimate .star_box .star_list .item { width: 19px; height: 19px; float: left; margin-right: 6px; background: url(../../img/reserve/icon_star2_32.png) no-repeat center center; background-size: contain; position: relative; } .container_motormaninfo .estimate .star_box .star_list .item .wrapper_star { overflow: hidden; width:100%; display: none; } .container_motormaninfo .estimate .star_box .star_list .item img { max-width:19px; } .container_motormaninfo .estimate .star_box .star { font-size: 0.28rem; color: #787878; float: left; font-size: 0.28rem; margin-top:0.14rem; }