评论星星的效果
在网上参考别人做好的,自己再修改了一些。做成自己想要的效果。
1、首先需要字体图标。需要jQuery插件。
下面是我的代码:
CSS:
.pinglun{ height: 30px; } .icon{ fill: currentColor; /*color: rgb(252, 172, 0);*/ cursor: pointer; } .pinglunfont{ width: 30px; height: 30px; display: inline-block; }
HTML:
<div class="pinglun"> <input type="hidden" class="pinglunnum" value="0"> <svg class="icon pinglunfont" aria-hidden="true"> <use xlink:href="#icon-huisepinglun" class="xing"></use> </svg> <svg class="icon pinglunfont" aria-hidden="true"> <use xlink:href="#icon-huisepinglun" class="xing"></use> </svg> <svg class="icon pinglunfont" aria-hidden="true"> <use xlink:href="#icon-huisepinglun" class="xing"></use> </svg> <svg class="icon pinglunfont" aria-hidden="true"> <use xlink:href="#icon-huisepinglun" class="xing"></use> </svg> <svg class="icon pinglunfont" aria-hidden="true"> <use xlink:href="#icon-huisepinglun" class="xing"></use> </svg> </div>
JavaScript:
var num = finalnum = 0; var tempnum =5; var lis = $(".pinglun .icon"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { finalnum = num || tempnum; for(var i = 0; i < lis.length; i++) { lis.eq(i).attr("color",i < finalnum ? "rgb(252, 172, 0)" : "#bbb"); } } for(var i = 1; i <= lis.length; i++) { lis.eq(i-1).index(i); lis.mouseover(function(){ fnShow($(this).index()); }) lis.mouseout(function(){ fnShow(0); }) lis.click(function(){ tempnum = $(this).index(); }) } //初始状态5颗星 fnShow(5);
另外一种方式,用css控制星星的数量和颜色。代码如下:
(1)html
<div class="all_star"> <i class="fa"></i> <i class="fa"></i> <i class="fa"></i> <i class="fa"></i> <i class="fa"></i>
</div>
<input class="none" id="num" type="hidden"/>
(2)js
$(function(){ $(".fa").click(function(){ var num=$(this).index()+1; $("#num").val(num); }) $(".fa").mouseover(function(){ $(this).addClass("oarage"); $(this).prevAll().addClass("oarage"); $(this).nextAll().removeClass("oarage"); }) $(".fa").mouseout(function(){ var num=$("#num").val(); if(num==null || num==""){ $(".fa").removeClass("oarage"); }else{ $(".fa").removeClass("oarage"); $(".fa:lt("+num+")").addClass("oarage"); } }) })
做出来的效果: