css 五角星 (转)
1.前言
之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来。总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花了2个小时,把这三种类型的需求自己写了demo并做了演示,这样的话,感觉一字一字敲出来的代码,确实是到了脑袋里了。之前一直崇尚写简单的博客,也将五角星评分、点赞收藏、展示评分写成了三个简单的博客,奈何博客园要求博客要有篇幅,所以我的那三篇博客并没有上到博客园首页,但是我觉得这个方法应该让更多的小伙伴知道,所以今天做了一个总结,希望能在博客园首页展示。当然了,如果不想看长篇的,可以自行看简短版本:
2.详细讲解
使用方法:
- 使用unicode字符集,文档需要申明为UTF-8;
- 下面符号列表后面有两列编号,第一列是用于HTML的,用的时候在前面加上&#;
- 第二列用于css文件中,需要用\来转义;也可以用于js中,和css用法一样,但要用\u来转义;
注意事项:
98%的字符都能在游览器下正常显示,实际操作中,要在各个浏览器下验证一下。每个浏览器显示的效果也有可能稍微有点区别。
字符图集一览表:
今天讲到的这几种效果都会用到这个字符集,无需引用:
2.1如何用html简单实现点赞收藏并取消收藏
2.1.1 css样式
.like{ font-size:66px; color:#ccc; cursor:pointer;} /*原始样式*/
.cs{color:#f00;}/*点击后出现样式*/
2.1.2 html内容
<p class="like">❤</p>
2.1.3 js代码
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
$(".like").click(function () {
$(this).toggleClass('cs');
})
})
</script>
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内容
<ul class="cleanfloat">
2 <li>★</li>
3 <li>★</li>
4 <li>★</li>
5 <li>★</li>
6 <li>★</li>
7 </ul>
2.2.3 js代码
<script>
$(function () {
$("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');
})
})
</script>
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内容
<div>
<p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p>
<p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p>
<p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p>
</div>
2.3.4 展示效果图
2.3.5 总结:是不是很简单就实现了。实际操作中,大家就可以按照这个思路了,以后遇到这种效果都无需用图片再去拼接了。超级简单实用。
3.本文总结
个人觉得这几种情况做前端的话还是会很大概率遇到的,我也希望这篇文章对你有帮助,能让你学到知识,也通过这个总结,让自己更深的领会到了学习的重要性!如果这篇文章对你有帮助,可以点个赞,感谢支持,如果觉得没有帮助到你或者写的不好,还请指教。
css 五角星 (转)的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
转自:http://blog.csdn.net/chenhongwu666/article/details/38905803 CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆 ...
- 进阶篇之纯css+字体实现五角星(半颗星)评分
1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...
- css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)
1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...
- 纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
- CSS绘制正五角星原理(数学模型)
尽管网上有很多CSS绘制五角星的代码案例,但是对于初学者来说可以拿来移植使用,但是在不明白其原理的情况下,进行修改移植就比较困难了.譬如想要将五角星尺寸进行缩小或者放大等设计,就需要对原代码相关数据进 ...
- css sprite简便方法切 《评分五角星》
摘抄自我趣同伴的心得: 大家可以会遇到过要做满意度用星级来评分的情况,类似这种 实现的方法有很多,大家最初想到的可能是根据满意度有多少种情况就切多少种图,然后拼在一张图里面,通过控制图片的位置来实现. ...
- 用CSS画五角星
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
随机推荐
- Openerp 中打开 URL 的三种 方法
来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...
- oracle 存储过程 示例
oracle 存储过程 示例 CreationTime--2018年9月4日09点49分 Author:Marydon 1.情景展示 对VIRTUAL_QRCODELOG表的静态二维码,动态二维码 ...
- 【Linux】more命令
用途 more主要用于一页一页查看档案 全称 全称即为more 说明 空格键 :代表向下翻一页,也可以使用CTRL+F Enter :代表下翻一行 :f :立刻显示出文件名以及目前显示的行数 ...
- java线程--volatile实现可见性
volatile关键字: 1)能够保证volatile变量的可见性 2)不能保证volatile变量复杂操作的原子性. volatile如何实现内存可见性: 深入来说:通过加入内存屏障和禁止重排序优化 ...
- 【Leet Code】Palindrome Number
Palindrome Number Total Accepted: 19369 Total Submissions: 66673My Submissions Determine whether an ...
- 配置tomcat的session共享
可通过下面方法限制一个用户访问一个服务器之后就只在该服务器上操作. 请求负载过程中会话信息不能丢失.那么在多个tomcat中session需要共享. 配置tomcat的session共享可以有三种解决 ...
- C#调取java接口
1. public class APIRequest { //public static string commonUrl = @"http://192.168.2.186 ...
- Ubuntu分区方案归总
更新时间:2010-8-26 一.各文件及文件夹的定义 /bin:bin是binary(二进制)的缩写.存放必要的命令 存放增加的用户程序. /bin分区,存放标准系统实用程序. /boot: ...
- 用QQ帐号和新浪微博帐号登录网站
用QQ帐号登录: 先去http://connect.qq.com/intro/login/申请 然后点击验证 将下面代码复制到网站首页中,放进去以后再点击验证就能得到ID和key 第一步:配置 ...
- Mysql 数据库数值类型详解
MySQL 支持所有标准SQL 中的数值类型,其中包括严格数值类型(INTEGER.SMALLINT.DECIMAL 和NUMERIC),以及近似数值数据类型(FLOAT.REAL 和DOUBLE P ...