简介
记得之前看到过有人发过使用矢量图标（部分字体中的特殊字符代替图片）实现的，但是实际应用上没有人会选择用矢量图标。
正好最近优化功能要用到评级，因此写了个图片实现的。
这里用图片实现，简单易改——换图片就可以了。
代码如下，简单改动就可以使用。
优点：拿了就用，无需过多改动，实现动态，$(’.tryp’).eq(index).find(‘span’).addClass(‘tryspan-p01’)
缺点：jq不能操作before，因此要多写点对应的css样式，大概用上述jq代码去操作。
这是展示，对应的点击评级我不需要，暂时没做，等过两天空了再考虑
小白文，晚了好些年才开博客，把手边的代码拉出来上传，丰富一下博客内容
高手路过，无视就好。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>五角星</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{
margin:0;
border:0;
padding: 0;
}
//包装盒
.tryclass{
position: relative;
top: 200px;
left: 200px;
background: #000;
width: 350px;
height: 50px;
}
//调整图片在盒子中的展示位置
.tryp{
position: relative;
top:15px;
}
//img 宽高100%，因为伪类中img是以contant引入的，对齐建议采取上对齐，避免出现before中的图片和当前图片出现错位
img{
width: 100%;
height: 100%;
vertical-align: top;
}
.try span{
width: 22px;
height: 21px;
margin-right: 5px;
}
//以下为起作用的css代码
.tryp span {
display: block;
float: left;
position: relative;
overflow: hidden;
white-space: pre;
}
//这里用图片代替content起作用，如果用想实现文字图标，则在content中写入，content不可为空，为空before不生效
.tryp span:before {
position: absolute;
left: 0;
top: 0;
display: block;
width: 0%;
content: ' ';
overflow: hidden;
background: url(starfive.png);
background-size: 22px 21px;
}
//因为jq不能操作伪类，因此无法动态写入宽地，只能多写点css代码，选用对应的css类插入，这里把1&-100%都写进去了。
.tryp .tryspan:before{width: 100%;}
.tryp .tryspan-p01:before{width: 01%;}
.tryp .tryspan-p01:before{width: 01%;}
.tryp .tryspan-p03:before{width: 03%;}
.tryp .tryspan-p04:before{width: 04%;}
.tryp .tryspan-p05:before{width: 05%;}
.tryp .tryspan-p06:before{width: 06%;}
.tryp .tryspan-p07:before{width: 07%;}
.tryp .tryspan-p08:before{width: 08%;}
.tryp .tryspan-p09:before{width: 09%;}
.tryp .tryspan-p10:before{width: 10%;}
.tryp .tryspan-p11:before{width: 11%;}
.tryp .tryspan-p12:before{width: 12%;}
.tryp .tryspan-p13:before{width: 13%;}
.tryp .tryspan-p14:before{width: 14%;}
.tryp .tryspan-p15:before{width: 15%;}
.tryp .tryspan-p16:before{width: 16%;}
.tryp .tryspan-p17:before{width: 17%;}
.tryp .tryspan-p18:before{width: 18%;}
.tryp .tryspan-p19:before{width: 19%;}
.tryp .tryspan-p20:before{width: 20%;}
.tryp .tryspan-p21:before{width: 21%;}
.tryp .tryspan-p22:before{width: 22%;}
.tryp .tryspan-p23:before{width: 23%;}
.tryp .tryspan-p24:before{width: 24%;}
.tryp .tryspan-p25:before{width: 25%;}
.tryp .tryspan-p26:before{width: 26%;}
.tryp .tryspan-p27:before{width: 27%;}
.tryp .tryspan-p28:before{width: 28%;}
.tryp .tryspan-p29:before{width: 29%;}
.tryp .tryspan-p30:before{width: 30%;}
.tryp .tryspan-p31:before{width: 31%;}
.tryp .tryspan-p32:before{width: 32%;}
.tryp .tryspan-p33:before{width: 33%;}
.tryp .tryspan-p34:before{width: 34%;}
.tryp .tryspan-p35:before{width: 35%;}
.tryp .tryspan-p36:before{width: 36%;}
.tryp .tryspan-p37:before{width: 37%;}
.tryp .tryspan-p38:before{width: 38%;}
.tryp .tryspan-p39:before{width: 39%;}
.tryp .tryspan-p40:before{width: 40%;}
.tryp .tryspan-p41:before{width: 41%;}
.tryp .tryspan-p42:before{width: 42%;}
.tryp .tryspan-p43:before{width: 43%;}
.tryp .tryspan-p44:before{width: 44%;}
.tryp .tryspan-p45:before{width: 45%;}
.tryp .tryspan-p46:before{width: 46%;}
.tryp .tryspan-p47:before{width: 47%;}
.tryp .tryspan-p48:before{width: 48%;}
.tryp .tryspan-p49:before{width: 49%;}
.tryp .tryspan-p50:before{width: 50%;}
.tryp .tryspan-p51:before{width: 51%;}
.tryp .tryspan-p52:before{width: 52%;}
.tryp .tryspan-p53:before{width: 53%;}
.tryp .tryspan-p54:before{width: 54%;}
.tryp .tryspan-p55:before{width: 55%;}
.tryp .tryspan-p56:before{width: 56%;}
.tryp .tryspan-p57:before{width: 57%;}
.tryp .tryspan-p58:before{width: 58%;}
.tryp .tryspan-p59:before{width: 59%;}
.tryp .tryspan-p60:before{width: 60%;}
.tryp .tryspan-p61:before{width: 61%;}
.tryp .tryspan-p62:before{width: 62%;}
.tryp .tryspan-p63:before{width: 63%;}
.tryp .tryspan-p64:before{width: 64%;}
.tryp .tryspan-p65:before{width: 65%;}
.tryp .tryspan-p66:before{width: 66%;}
.tryp .tryspan-p67:before{width: 67%;}
.tryp .tryspan-p68:before{width: 68%;}
.tryp .tryspan-p69:before{width: 69%;}
.tryp .tryspan-p70:before{width: 70%;}
.tryp .tryspan-p71:before{width: 71%;}
.tryp .tryspan-p72:before{width: 72%;}
.tryp .tryspan-p73:before{width: 73%;}
.tryp .tryspan-p74:before{width: 74%;}
.tryp .tryspan-p75:before{width: 75%;}
.tryp .tryspan-p76:before{width: 76%;}
.tryp .tryspan-p77:before{width: 77%;}
.tryp .tryspan-p78:before{width: 78%;}
.tryp .tryspan-p79:before{width: 79%;}
.tryp .tryspan-p80:before{width: 80%;}
.tryp .tryspan-p81:before{width: 81%;}
.tryp .tryspan-p82:before{width: 82%;}
.tryp .tryspan-p83:before{width: 83%;}
.tryp .tryspan-p84:before{width: 84%;}
.tryp .tryspan-p85:before{width: 85%;}
.tryp .tryspan-p86:before{width: 86%;}
.tryp .tryspan-p87:before{width: 87%;}
.tryp .tryspan-p88:before{width: 88%;}
.tryp .tryspan-p89:before{width: 89%;}
.tryp .tryspan-p90:before{width: 90%;}
.tryp .tryspan-p91:before{width: 91%;}
.tryp .tryspan-p92:before{width: 92%;}
.tryp .tryspan-p93:before{width: 93%;}
.tryp .tryspan-p94:before{width: 94%;}
.tryp .tryspan-p95:before{width: 95%;}
.tryp .tryspan-p96:before{width: 96%;}
.tryp .tryspan-p97:before{width: 97%;}
.tryp .tryspan-p98:before{width: 98%;}
.tryp .tryspan-p99:before{width: 99%;}
</style>
</head>
<body>
<div class="tryclass">
<p class="tryp" style="margin-left:50px;"><span class="tryspan"><img src="starfives.png"></span></p>
<p class="tryp"><span class="tryspan"><img src="starfives.png"></span></p>
<p class="tryp"><span class="tryspan"><img src="starfives.png"></span></p>
<p class="tryp"><span class="tryspan-p30"><img src="starfives.png"></span></p>
<p class="tryp"><span class=""><img src="starfives.png"></span></p>
<p class="tryp"><span class=""><img src="starfives.png"></span></p>
</div>
</body>
</html>
这里有张图片↓↓↓
←←←这是白色星星
这里有张图片↑↑↑
←←←这个是黄色星星
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
