1.前言javascript
以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来。总以为这样的话没有进步,没有把知识放进脑壳里,因此,本身花了2个小时,把这三种类型的需求本身写了demo并作了演示,这样的话,感受一字一字敲出来的代码,确实是到了脑壳里了。以前一直崇尚写简单的博客,也将五角星评分、点赞收藏、展现评分写成了三个简单的博客,奈何博客园要求博客要有篇幅,因此个人那三篇博客并无上到博客园首页,可是我以为这个方法应该让更多的小伙伴知道,因此今天作了一个总结,但愿能在博客园首页展现。固然了,若是不想看长篇的,能够自行看简短版本:css
2.详细讲解html
使用方法:前端
使用unicode字符集,文档须要申明为UTF-8;java
下面符号列表后面有两列编号,第一列是用于HTML的,用的时候在前面加上
第二列用于css文件中,须要用\来转义;也能够用于js中,和css用法同样,但要用\u来转义;
注意事项:jquery
98%的字符都能在游览器下正常显示,实际操做中,要在各个浏览器下验证一下。每一个浏览器显示的效果也有可能稍微有点区别。web
字符图集一览表:浏览器
今天讲到的这几种效果都会用到这个字符集,无需引用:svg
2.1如何用html简单实现点赞收藏并取消收藏post
2.1.1 css样式
.like{font-size:66px;color:#ccc;cursor:pointer;} /*原始样式*/.cs{color:#f00;}/*点击后出现样式*/
2.1.2 html内容
❤
2.1.3 js代码
$(".like").click(function() {
$(this).toggleClass('cs');
})
})
2.1.4 展现效果
2.1.5 总结:css样式只有两行,第一行就是设置心形大小和颜色,第二行就是点击后心形的颜色。html一行代码就能够展现一个心形。js就是用来点击以后心形变由原始样式变成红色。是否是超简单实用。
2.2 简单大气实现五角星评分
2.2.1 css样式
.cleanfloat::after{display:block;clear:both;content:"";visibility:hidden;height:0;}/*清浮动*/ul li{list-style:none;float:left;font-size:30px;margin:5px;color:#ccc;cursor:pointer;}/*五角星样式*/.hs,.cs{color:#f00;}/*五角星点击后样式*/
2.2.2 html内容
2★3★4★5★6★7
2.2.3 js代码
$("ul li").hover(function(){
$(this).addClass('hs');
$(this).prevAll().addClass('hs');
},function(){
$(this).removeClass('hs');
$(this).prevAll().removeClass('hs');
})
$("ul li").click(function() {
$(this).addClass('cs');
$(this).prevAll().addClass('cs');
$(this).nextAll().removeClass('cs');
})
})
2.2.4 展现效果
2.2.5 总结:若是你的项目中要作一个这样的打分效果,就不须要用图片而后计算距离这么麻烦了。这个直接拿去用,颜色样式,大小,都是能够随便控制的,很是的简单和实用。是否是呢。
2.3 css+字体实现五角星(半颗星、1/3颗星)评分效果
2.3.1 这个用到了 webFontIcon字体,很抱歉我不会上传字体,会的童鞋能够教教我,你们能够本身去下载这个字体。
2.3.2 css样式
.cleanfloat::after{display:block;clear:both;content:"";visibility:hidden;height:0;}*{margin:0;padding:0;}
/*字体路径按照你的路径去修改*/@font-face{font-family:'AlluraRegular';src:url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'),
url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'),
url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');
}.starFive span{display:block;float:left;font-size:25px;font-family:'AlluraRegular';text-align:center;color:#888;width:27px;height:33px;line-height:33px;margin-right:5px;position:relative;overflow:hidden;white-space:pre;
}.starFive span:before{position:absolute;left:0;top:0;display:block;width:50%;content:attr(data-content);overflow:hidden;color:#F63;
}.sF1 span:before{width:70%;}.sF2 span:before{width:50%;}.sF3 span:before{width:40%;}.starFive .org_star{color:#F63;}.starFive b{font-weight:normal;line-height:40px;font-size:25px;color:#888;margin-left:10px;
}
2.3.3 html内容
RRRRR4.7分
RRRRR3.5分
RRRRR2.4分
2.3.4 展现效果图
2.3.5 总结:是否是很简单就实现了。实际操做中,你们就能够按照这个思路了,之后遇到这种效果都无需用图片再去拼接了。超级简单实用。
3.本文总结
我的以为这几种状况作前端的话仍是会很大几率遇到的,我也但愿这篇文章对你有帮助,能让你学到知识,也经过这个总结,让本身更深的领会到了学习的重要性!若是这篇文章对你有帮助,能够点个赞,感谢支持,若是以为没有帮助到你或者写的很差,还请指教。