精华内容
下载资源
问答
  • 一、星星点灯,照亮我的家门大家都喜欢...故事其实是这样的~~在天气还未如此炎热的某天,@waylybaye微博上展示了其使用canvas绘制星星图片,然后再保存为png格式使用的折腾:很赞,对不对!然,故事刚刚开始,而后我...

    一、星星点灯,照亮我的家门

    大家都喜欢听故事。

    每篇文章也都是有故事的。

    今天的故事是与星星相关的。

    没错,讲的是星星点灯的故事——

    才怪!

    标题只是我脑子突然蹦出来的,唉,这首老到掉渣子的歌我居然条件反射般想起,可见——我老了!

    故事其实是这样的~~

    在天气还未如此炎热的某天,@waylybaye微博上展示了其使用canvas绘制星星图片,然后再保存为png格式使用的折腾:

    f07ee31718f65890ef6cb37755687e35.png

    很赞,对不对!

    然,故事刚刚开始,

    而后我随便吐槽了句:

    这种效果两个星星就可以完全CSS实现了,包括IE6浏览器,多少多余劳动力浪费了啊~~

    一石激起三层浪:

    3507db176e1fe4dd357f2662360907cb.png

    1f917.svg有人对两颗星星实现星星评分效果感兴趣;

    1f914.svg有人觉得纯CSS搞不定记住之前用户所选星星。

    实际上,两颗星星(见下图)完全可以实现兼容IE6在内的效果;而且,纯CSS可是可以记住当前星星点击个数哦!

    6789a211c355acff052adb206e94fda8.png

    哈哈,我们的故事就此展开……

    二、小星星,亮晶晶,点点像你的眼睛

    正片之前先来个精彩预告,您可以狠狠地点击这里:两颗星星实现的星星点击评分效果demo

    哈哈,这回不上截图了,上截视频,更直观,截自Chrome浏览器,纯CSS实现。对了,貌似忘记把《爱情公寓》电视关掉,有杂音,嘻嘻……

    iPad党若看不到上视频,可以点击下面区域查看截图:

    您可能会惊讶地发现,诶,怎么点击的星星可以记住啊,纯CSS?鑫哥你确定不是在忽悠?

    2147936b42311ead3422ccf102102619.png

    我不姓赵哦~

    慢慢来,先看看两个星星如何实现兼容IE6浏览器的hover交互效果。

    三、一闪一闪亮晶晶 满天都是小星星

    两个星星实现原理见下图:

    图1

    dbd1c8a38652d66e1fe8ed4e84a63e62.png    图2

    bfe08f560548f23f2ee1517b81fa65cd.png

    背景色就是灰色平铺;

    5个小标签,分别对应每个星星,宽度1/5,其垂直层次关系见图1示意;

    当鼠标经过某星星,例如上图所示第3个,宽度延伸,背景显示,hover效果即呈现;

    最后,仔细观察其他小星星的层次以及位置,不存在覆盖的情况,于是,hover其他小星星,效果同样存在;

    over!

    以上就是使用两个星星+纯CSS实现hover效果的原理。

    5个小星星使用a标签,则可兼容IE6浏览器。

    HTML结构如下:

    CSS示意如下:

    /* 灰色背景星星5个平铺 */

    .star_bg {

    width: 120px; height: 20px;

    background: url(star.png) repeat-x;

    position: relative;

    overflow: hidden;

    }

    /* 这是5个小星星们的默认状态的定位 */

    .star {

    height: 100%; width: 24px;

    line-height: 6em;

    position: absolute;

    z-index: 3;

    }

    .star_1 { left: 0; }

    .star_2 { left: 24px; }

    .star_3 { left: 48px; }

    .star_4 { left: 72px; }

    .star_5 { left: 96px; }

    /* 鼠标hover效果实现,分别显示背景与定宽 */

    .star:hover {

    background: url(star.png) repeat-x 0 -20px;

    left: 0; z-index: 2;

    }

    .star_1:hover { width: 24px; }

    .star_2:hover { width: 48px; }

    .star_3:hover { width: 72px; }

    .star_4:hover { width: 96px; }

    .star_5:hover { width: 120px; }

    两颗星星hover事故讲完了,那如何记住星星点击的故事呢?

    四、城市里 小星星 稀疏的 亮晶晶

    去年年初曾介绍过“CSS radio/checkbox单复选框元素显隐技术”,又称“checkbox hack技术”。

    利用label for与单复选框等之间的点击关联特性,结果:checked伪类选择器以及兄弟选择器实现我们想要的交互效果——例如,元素的显示与隐藏,或者是选中的星星个数标记。

    有些迷糊?不急,来个最简单示例,跟我一步一步来:

    一个单选框,以及一个对应的label标签,如下:

    观光团

    点击含“观光团”字样的label标签,只要不是奇葩设备,单选框都会被选中的(因为for值等于单选框id值);

    于是,触发了如下伪类:

    input:checked {}

    CSS3中还有兄弟选择器,如~以及相邻兄弟选择器+,于是,我们可以改变label标签的状态,例如,文字变红:

    input:checked + label { color: red; }

    如果我们把label做成星星背景,岂不是我们点击这个星星,触发radio选中,就可以让这个label标签一直显示星星背景?

    input:checked + label { background: url(star.png) repeat-x 0 -20px; }

    以上就是实现的基本原理。

    OK,下面来看看demo页面是如何处理的。

    因为要兼顾IE6浏览器(hover效果),因此,采用的是a标签内嵌label标签的形式。如果您不考虑IE6浏览器,墙裂推荐直接一个label标签。于是,就有类似下面的HTML结构(第一颗星星示意):

    a标签负责hover效果,label标签负责点击效果。

    我们需要隐藏单选框,且为可用性隐藏。我是使用clip实现的:

    { position: absolute; clip: rect(0 0 0 0); }

    伪类与兄弟选择器控制星星在对应单选框选中中的状态,其实与hover的CSS类似:

    .score:checked + .star {

    background: url(star.png) repeat-x 0 -20px;

    left: 0; z-index: 1;

    }

    .score_1:checked ~ .star_1 { width: 24px; }

    .score_2:checked ~ .star_2 { width: 48px; }

    .score_3:checked ~ .star_3 { width: 72px; }

    .score_4:checked ~ .star_4 { width: 96px; }

    .score_5:checked ~ .star_5 { width: 120px; }

    于是,我们就实现了点击记住星星个数的效果了!

    但,直接这样是有问题的,见下图示意:

    9fef38f534dae1b8a60c734498c6aa20.png

    例如,点击第三颗星星,自然星星三颗呈现。此时,鼠标hover第2颗星星,理应显示两颗星星,但由于下面三颗星星占道了,因此,实际上显示了是3颗星星,问题出现。

    问题其实不难解决。

    我们只要让鼠标hover星星容器时候,所有背景都没有;经过星星时候,背景出现就可以了。

    .star_bg:hover .star { background-image: none; } /* 经过父级容器,星星背景图去除 */

    父级背景隐藏权重要小于经过星星显示权重,因此,我使用了!important(您也可以使用其他方法提高选择器权重),如下:

    .star:hover { background: url(star.png) repeat-x 0 -20px!important; }

    于是,星星背景固定影响hover问题理论上解决了。//zxx: IE6上面两段CSS都不认识,因此,hover状态需要借助JS解决,具体参见demo源代码。

    最后一个技术点,z-index设置。根据上面的分析,星星总共有3种权重状态,因此,相应的,也存在3种层级状态:

    1. 默认状态的星星层级最高,以便随时实现hover效果,demo中其z-index值为3;

    2. 正在被hover的星星需要比点击固定显示星星层级高。众所周知,如果z-index值相同,后面的绝对定位元素会覆盖前面的。这种情况下,如果第3颗点击选中,鼠标经过第2颗星星,就会出现hover死循环——星星2被星星3覆盖→星星2进入非hover状态(较高层级,覆盖星星3)→触发星星2hover态(被星星3覆盖)→星星2进入非hover状态)→触发星星2hover态→……

    因此,需要设置,hover状态z-index:2; 选中态z-index: 1. 完整示意如下:

    .star { z-index: 3; }

    .star:hover { z-index: 2; }

    :checked + .star { z-index: 1; }

    over again!

    五、看那星星多么美丽,摘下一颗有局限性

    这里的纯CSS实现实际是CSS3技术的应用,因此,局限就是兼容性。IE9+浏览器以及移动端都能不错实现。至于IE6~IE8浏览器,则……

    实际上,IE7,IE8等浏览器点击星星,单选框也是选中的。对于这些浏览器,我们可能需要额外一点JS以及部分CSS的配合,实现我们需要的效果。具体实现可参见demo源代码,低版本IE浏览器JS代码直接可见。非重点,不展示。

    现在的我越来越有一种感觉,或者说需求,是不是网站可以根据浏览器自动加载不同的JS文件呢?

    比方说,IE6~IE8加载老版本jQuery,IE9+加载新jQuery。或者这里的,IE6-8单独加载一个处理包,或者称为兼容包,类似软件兼容补丁一样的东西。

    a与label嵌套之特性

    a标签里面嵌套label标签,点击后会有何反应呢?

    据测试,如果label block水平,同时for关联控件元素,a标签打酱油;否则,会触发a标签的相关行为。

    demo中,为了IE6的hover效果,label是inline水平。貌似label标签酱油,因此,交互是通过a标签+JS实现的。

    六、就向流星许个心愿,让你知道这里是结语

    从语义上将,实际上,星星评分就是个单选框。因此,实际开发制作的时候,建议保留单选框组,增强可访问性。因此,从这点上讲,本文所展示的CSS驱动星星评分交互的方法是很有价值的。

    如果只想实现简单,5颗星星一排,共5排的背景图片是最好的选择。除了背景图大一点,其他其实都还好,可以说是一个更适合大众的实际的方法。注意,此方法也需要保留单选框组,否则仅仅一个表象实现,实则质量不高。

    本文方法好处在于,纯CSS驱动,省了不少JS;同时图片背景比较小。但是,学习以及理解成本稍高,可能并不适用于所有同行,因此,标题前缀为“折腾”二字。还有,本文方法可能在一些低端的Android pad上有些问题,不过我表示对此不屑一顾。

    故事到此结束,谢谢品鉴!

    (本篇完)

    展开全文
  • 2.3 css 字体实现五角星(半颗星、1/3颗星)评分效果 2.3.1 这个用到了  webFontIcon 字体,很抱歉我不会上传字体,会的童鞋可以教教我,大家可以自己去下载这个字体。 2.3.2 css样式 .cleanfloat::...

    1.前言

    之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来。总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花了2个小时,把这三种类型的需求自己写了demo并做了演示,这样的话,感觉一字一字敲出来的代码,确实是到了脑袋里了。之前一直崇尚写简单的博客,也将五角星评分、点赞收藏、展示评分写成了三个简单的博客,奈何博客园要求博客要有篇幅,所以我的那三篇博客并没有上到博客园首页,但是我觉得这个方法应该让更多的小伙伴知道,所以今天做了一个总结,希望能在博客园首页展示。当然了,如果不想看长篇的,可以自行看简短版本:

    1. html超级简单实现点赞(收藏)和取消赞效果

    2. 简单实现大方接地气的五角星评分

    3. 进阶篇之纯css 字体实现五角星(半颗星)评分

    2.详细讲解

    使用方法:

    使用unicode字符集,文档需要申明为UTF-8;

    1. 下面符号列表后面有两列编号,第一列是用于HTML的,用的时候在前面加上&#;
    2. 第二列用于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">&#10084;</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>&#9733;</li>
    3        <li>&#9733;</li>
    4        <li>&#9733;</li>
    5        <li>&#9733;</li>
    6        <li>&#9733;</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.本文总结

    个人觉得这几种情况做前端的话还是会很大概率遇到的,我也希望这篇文章对你有帮助,能让你学到知识,也通过这个总结,让自己更深的领会到了学习的重要性!如果这篇文章对你有帮助,可以点个赞,感谢支持,如果觉得没有帮助到你或者写的不好,还请指教。

    展开全文
  • 作者:KUMAR HARSH 译者:前端小智 来源:blog 有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 ... 对于一个内容服务的网站来说评价...性能(不能用图片) 可调整的大小 可访问性 小数位打分.

    作者:KUMAR HARSH
    译者:前端小智
    来源:blog

    有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    对于一个内容服务的网站来说评价打分也是很重要的一部分,它有利于分析用户对我们的内容的喜好程序。最近,我们团需要为一个项目实现一个星级评价的组件,需求如下:

    • 性能(不能用图片)
    • 可调整的大小
    • 可访问性
    • 小数位打分(如:3.53.2
    • 使用 css 就可以直接控制样式

    要达到上面的要求,经常调研,最终选择了 SVG 方案。

    任务

    下图是我们最终想要的效果:

    x001.png

    我们主要的工作就是让星星可以改变其颜色,描边,大小,还可以显示半颗星星。

    实现

    在实现之前,我们需要有一个基础 SVG 结构,如下所示:

    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path d="..."/>
    </svg>
    

    添加 aria-label

    添加 aria-label可以使用读屏器用户能够访问这一信息。

    <p aria-label="Rating is 4.5 out of 5">
       <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
          <path d="..."/>
       </svg>
    </p>
    

    aria-label属性用来给当前元素加上的标签描述,接受字符串作为参数。是用不可视的方式给元素加label(如果被描述元素存在真实的描述元素,可使用 aria-labelledby 属性作为来绑定描述元素和被描述元素来代替)。

    如何重用SVG

    我们可以把上面的SVG 标签复制五次,或者提取path数据并保存在某个地方,然后在不重复代码的情况下重新使用它。我们选择后者。

    首先,我们需要创建一个宽度和高度为零的SVG,这样它就不会保留空间。

    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Content -->
    </svg>
    

    在该SVG中,我们需要在<symbol>元素中包含path数据。根据MDN:

    symbol 元素用于定义图形模板对象,可以通过<use>元素来实例化。

    <symbol>里面的内容与图标的内容相同。另外,添加一个 id 也很重要,这样我们以后就可以引用这个 symbol

    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="star">
            <path d="..."/>
        </symbol>
    </svg>
    

    有了这个设置,我们现在可以用<use>元素来重用这个symbol。做法就是使用id作为href属性的值。

    <p class="c-rate">
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
    </p>
    

    星星的样式

    有了上面的星星结构,我们现在来添加样式:

    <p class="c-rate">
        <svg class="c-icon active" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon active" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon active" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon active" width="32" height="32">
          <use href="#star"></use>
        </svg>
        <svg class="c-icon" width="32" height="32">
          <use href="#star"></use>
        </svg>
    </p>
    
    .c-icon {
        --star-active: #fece3c;
        --star-inactive: #6c6962;
        fill: var(--star-inactive);
    }
    
    .c-icon.active {
        fill: var(--star-active);
    }
    

    运行后的结果:

    x002.png

    半颗星

    使用 SVG后做半颗星就很容易,有两个很好的解决方案。第一个是使用<masks>,第二个是使用SVG 渐变。

    使用<masks>

    使用 masks 的目的是模拟擦除星星的一部分并将另一部分涂成半透明颜色的效果。

    x003.png

    在上图中,有一个正方形和一个星星。它们的交集就是我们想要的结果。

    做法如下:

    • 创建一个可重用的SVG模板
    • 添加一个 <mask> 元素,位置为x=50%
    • 将 mask 应用到星星上
    <!-- The reusable SVG template -->
    <svg viewBox="0 0 32 32" id="star">
      <defs>
        <mask id="half">
          <rect x="50%" y="0" width="32" height="32" fill="white" />
        </mask>
        <symbol viewBox="0 0 32 32" id="star">
          <path d="..." />
        </symbol>
      </defs>
    </svg>
    
    <svg class="c-icon" width="32" height="32" viewBox="0 0 32 32">
        <use href="#star" mask="url(#half)" fill="green"></use>
    </svg>
    

    问题是,当一颗半透明的星星被遮住时,我们如何才能显示它呢? 好吧,多亏了 SVG,我们可以在 <mask> 中包含多个元素。

    <mask id="half">
      <rect x="0" y="0" width="32" height="32" fill="white" />
      <rect x="50%" y="0" width="32" height="32" fill="black" />
    </mask>
    

    mask 中,白色元素表示我们想要显示的内容,黑色元素表示我们想要隐藏的内容。结合在一起时,我们可以创建一个cut-out effect效果。

    x004.png

    注意,白色矩形被定位在0,0点,而黑色矩形被定位在50%,0。下面是它的效果:

    x005.png

    涂写的部分代表最终结果,半颗星。 现在,你的可能在想,如何添加另一个半透明的星星以使其更清晰?

    通过使用比纯黑更浅的颜色,我们将得到一个半透明的效果。这意味着目前被隐藏的区域将有一个浅色的星形颜色。

    <mask id="half">
      <rect x="0" y="0" width="32" height="32" fill="white" />
      <rect x="50%" y="0" width="32" height="32" fill="grey" />
    </mask>
    

    x006.png

    到这,我们回顾一下完整的 SVG 标签。

    <svg style="width: 0; height: 0;" viewBox="0 0 32 32">
       <defs>
          <mask id="half">
             <rect x="0" y="0" width="32" height="32" fill="white" />
             <rect x="50%" y="0" width="32" height="32" fill="grey" />
          </mask>
    
          <symbol viewBox="0 0 32 32" id="star">
             <path d="..." />
          </symbol>
       </defs>
    </svg>
    
    <p class="c-rate">
       <svg class="c-icon" width="32" height="32" viewBox="0 0 32 32">
          <use href="#star" mask="url(#half)" fill="green"></use>
       </svg>
       <!-- 4 more stars -->
    </p>
    

    这样,我们就有了一个部分填充的恒星。这个解决方案的绝妙之处在于,我们不需要提供两种色调, mask 会起作用的:

    x007.png

    事例地址:https://codepen.io/shadeed/pen/bGWyoXW

    第一种方法到这就介绍完了,我们来看第二种方法。

    带有SVG渐变的半星

    mask类似,我们需要在 元素中定义一个渐变。

    <svg style="width: 0; height: 0;" viewBox="0 0 32 32">
        <defs>
            <linearGradient id="half" x1="0" x2="100%" y1="0" y2="0">
                <stop offset="50%" stop-color="#f7efc5"></stop>
                <stop offset="50%" stop-color="#fed94b"></stop>
            </linearGradient>
        </defs>
    </svg>
    

    注意,我们有两个色块,第一个代表前半部分,第二个代表浅色阴影。在这个解决方案中,我们需要手动提供两种颜色。

    ztjy08.png

    <p class="c-rate">
        <svg class="c-icon" width="32" height="32" viewBox="0 0 32 32">
            <use href="#star" fill="url(#half)"></use>
        </svg>
    </p>
    

    事例地址:https://codepen.io/shadeed/pen/eYWaero

    轮廓样式

    接下来我们给星星做个轮廓,这样看起来会更立体点。

    ztjy09.png

    SVG Mask 解决轮廓样式的问题

    要添加描边,我们只需要在SVG元素中添加stroke。这将很好地工作全星。然而,对于部分的,它将被切断,因为掩码。这对完整的星星来说是很好的。然而,对于半颗,由于mask的原因,它将被遮住。

    x010.png

    为了解决这个问题,我们需要另一个星形轮廓。可以通过复制<use>元素并删除它的 mask 来实现这一点。

    <p class="c-rate">
       <svg class="c-icon" width="32" height="32" viewBox="0 0 32 32">
          <use href="#star" mask="url(#half)" fill="green"></use>
          <use href="#star" fill="none" stroke="grey"></use>
       </svg>
    </p>
    

    注意,我们有两个<use>元素。一个带mask的,一个只有 stroke 的。这就是使用SVG masks 实现轮廓样式的方法。

    事例地址:https://codepen.io/shadeed/pen/jOmoaQQ

    SVG 渐变实现轮廓样式

    对于渐变解决方案,我们不需要复制图标,因为没有mask。我们需要做的是添加一个stroke,它就完成了。

    <svg style="width: 0; height: 0;" viewBox="0 0 32 32">
       <defs>
          <linearGradient id="half" x1="0" x2="100%" y1="0" y2="0">
            <stop offset="50%" stop-color="#f7efc5"></stop>
            <stop offset="50%" stop-color="#fed94b"></stop>
          </linearGradient>
       </defs>
    </svg>
    
    <p class="c-rate">
       <svg class="c-icon" width="32" height="32" viewBox="0 0 32 32">
         <use href="#star" fill="url(#half)" stroke="grey"></use>
       </svg>
    </p>
    

    事业地址:https://codepen.io/shadeed/pen/QWvROVV

    大小

    通过使用CSS变量并确保SVG具有正确的viewBox属性,我们可以轻松地调整它们的大小。

    .c-icon {
        width: var(--size, 24px)
        height: var(--size, 24px);
    }
    
    .c-icon--md {
        --size: 40px;
    }
    
    .c-icon--lg {
        --size: 64px;
    }
    

    ~完,我是刷碗智,我要去 SPA 了,我们下期见~


    原文:https://ishadeed.com/article/star-rating-svg/

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    交流

    文章每周持续更新,可以微信搜索**【大迁世界 】第一时间阅读,回复【福利】**有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

    展开全文
  •  小编最近在做星级评价实现半颗星评价的功能,得到这个需求,便开始了探索之旅,一开始自己登陆淘宝网查看评价效果,发现没有半颗星的效果,并且在网上查找半颗星的相关博客或网页,没有结果,便向项目组长提出,这...

             前言

    demo效果

    个人实现过程

    小结


    前言

        小编最近在做星级评价实现半颗星评价的功能,得到这个需求,便开始了探索之旅,一开始自己登陆淘宝网查看评价效果,发现没有半颗星的效果,并且在网上查找半颗星的相关博客或网页,没有结果,便向项目组长提出,这个需求没有必要实现吧,并拿出了淘宝网的例子,结果组长告诉我这是体验用户提出来的,并且她自己已经在网上找到了相应的demo效果。

       最后我被组长成功说服了,打算去试一试,便搜索关键字“ionic实现半颗星评价”,果然找到了组长所演示的demo,看来并不是不能做,只是自己没有找到真正的解决之道。看来有了小瓶颈之后,找组长交流一下也是会有突破的,^_^。

    demo效果

        一、demo地址

          https://blog.csdn.net/qq_30433815/article/details/78486484

       二、demo效果

        我才用的是第二种效果,点击实现半颗星。

                                                                                  

    个人实现过程

       一、CSS样式   

       主要是设计星星图片的样式,两张图片使用div包装起来,一张空星星图片的overflow的属性为hidden。

    overflow 属性规定当内容溢出元素框时发生的事情。

    hidden    内容会被修剪,并且其余内容是不可见的

     /*********************************************星级评价半颗星***********************************************************/
        .stars-off {
            margin-top: 10px;        
            background-size: 101px;
            width: 100px;
            height: 20px;
            overflow: hidden;
            text-align: left;
        }
        .stars-on {       
            background-size: 101px;
            height: 300%;
        }
        /*********************************************星级评价半颗星***********************************************************/

     

       二、HTML元素设计   

      其中在ionic中使用了[ngStyle]属性绑定,来获取ts文件中的变量的值。

       <ion-list *ngFor="let level of secondLevel;let j=index" style="margin-top: 5px;">
            <ion-list-header style="margin-bottom: 2px;">
              <p style="font-size: 18px;color:black;"> {{level.name}}</p>
            </ion-list-header>
            <div *ngFor="let item of level.templetAppraiseEntityList; let i=index">
              <ion-item-sliding>
                <ion-item>
                  <div class="star-div">
                    <div>{{item.name}} ({{item.weight}}分)</div>
                    <span (click)="chooseStar($event,id,detailId,item)">
                   <!-- 星级评价关键部分 -->
                      <div class="stars-off" style="background-image: url(assets/imgs/star-off.png);background-repeat: no-repeat">
                        <div class="stars-on" [ngStyle]="starts[item.index]"></div>
                      </div>
                   <!-- 星级评价关键部分 -->
                    </span>
                    <span class="scoreSpan">{{scoreItem[item.index]}}</span>                
                    <span #id style="display: none">{{item.id}}</span>
                    <span #detailId style="display: none">{{item.detailId}}</span>
                  </div>
                </ion-item>
              </ion-item-sliding>
            </div>
          </ion-list>

    三、TS逻辑判断  

    
    //星级评价的星星对象,属性如下图片地址以及显示的width 假设有五条评价记录
       starts = [
        { 'width': '0%', 'background-image': 'url(assets/imgs/star-on.png)', 'background-repeat': 'no-repeat' },
        { 'width': '0%', 'background-image': 'url(assets/imgs/star-on.png)', 'background-repeat': 'no-repeat' },
        { 'width': '0%', 'background-image': 'url(assets/imgs/star-on.png)', 'background-repeat': 'no-repeat' },
        { 'width': '0%', 'background-image': 'url(assets/imgs/star-on.png)', 'background-repeat': 'no-repeat' },
        { 'width': '0%', 'background-image': 'url(assets/imgs/star-on.png)', 'background-repeat': 'no-repeat' }
      ];
     
    
      starW = 0; //显示星星被填充形状
      star = 5; //五颗星
      index = 0;  
    
    
      //点击星星触发此事件
      chooseStar(e, id, detailId, item) {
        var offset = $(e.target).offset();
        var x = e.pageX;
        var left = offset.left;
        this.starW = Math.ceil((x - left) / 10) * 10;
        if (this.starW % 2 != 0) {
          this.starW += 10;
        }
        this.star = this.starW / 20
        this.starts[item.index].width = this.starW.toString() + '%';
        
        //判断点了几颗星星,通过星星的权重算分   
        this.integral = item.oneStarIntegral * this.star;
    
        // 实例化detailList用来接收每一条二级模板的评价内容
        let detailList = new scoreDetailModel();
        //将每一条的分数和对应的id赋值给detailList
        detailList.appraiseId = id.innerText;
        detailList.integral = this.integral;
        detailList.detailId = detailId.innerText;
        // 把list赋值给detailModel
        this.detailArray[item.index] = detailList;
        // 获取所有二级的分数,用于计算总分
        this.scoreItem[item.index] = this.integral;
    
        var sum = 0;
        // 循环计算总分
        for (let i = 0; i < this.scoreItem.length; i++) {
          sum = sum + this.scoreItem[i];
        }
        //总分
        this.sumIntegral = sum;
        // item.score.star = star;   
        item.score.star = this.star;
      }

    小结

       实现这个功能的过程中,小编遇到了两个小问题:(1)HTML文件中的 style属性不能获取ts中的变量值,便改用了[ngStyle];(2)星级评价的图片的路径问题,在本地与发布后在服务器上识别的路径不一样,图片路径写在css中会不识别,所以将它写在HTML元素或者ts中的变量中(此变量是提供给HTML元素使用的),这样的话直接写图片所在的绝对路径即可,如assets/imgs/star-on.png。

                                                                                     感谢您的访问!

    展开全文
  • 4.5 颗星

    2019-04-06 14:57:24
    前些天某位大佬在演示这闪闪的 4.5 颗星实现的时候,我不经意地瞟了一眼代码。嘴角些许上扬:呵,居然用的是图片来实现的,水平看来不咋地!要是换做我,肯定 N 种方法! 然后我就开始认真的想了想这 N 种方法到底有...
  • 默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。 2.评价内容,最多为200字。 3.上传图片最多上传6张,图片不可拉伸,可删除,可点击放大左右滑动展示 具体实现关键代码 关于星...
  • #两颗二叉树比较深度,没有反应,建立一颗二叉树求深度是可以的,俩可不知道为什么就错了,希望大佬可以帮忙看看啊!!! ![图片说明](https://img-ask.csdn.net/upload/201910/27/1572169680_951286.jpg) ``` ...
  • 段落前面空个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空个汉字。p{text-indent: 2em; /*em是相对单位,2em即现在一个字...
  • 1.前言javascript以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码...以前一直崇尚写简单的博客,也将五角评分、点赞收藏、展现评分写成了三...
  • Vuforia提高识别图星级

    2019-10-28 14:25:54
    高通的识别图上传到后台以后我们可以看有星级评定,值...从上面的5识别图片中我们可以总结到: 1、识别图的细节有棱角,且棱角数量特多 2、识别图的棱角分别均匀 3、图片单个元素很小 高通的识别图的特性点的...
  • 效果图: ...星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰,几及亮星 子组件:stars.html <view class='movie-grade'> <image style="width:{{star...
  • //次三目运算 }) this.setState({ starNum:newStar //设置state为遍历后的新数组 }) } render(){ return ( <Boxs> <span className="star"> { this.props.isStarClick? this.state.starNum.map((item, index)=>{ ...
  • 今天我给大家分享一个GitHub上非常火的学习资源,收获了14000+ 颗星,带你进入一个机器学习的交互式学习项目,让你轻松入门! 在这里还是要推荐下我自己建的Python开发学习群:1156465813,群里..
  • 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道种实现方式 1、background-position加上一张图片 图片:http://www.brookstone.com/webassets/pwr/engine/images/stars.gif 1 &...
  • 一、方法11、用到图片2、结构和样式Documentul {padding-left: 0;overflow: hidden;}ul li {float: left;list-style: none;width: 27px;height: 27px;background: url(img/star.gif)}ul li a {display: block;width:...
  • 2颗星星+纯CSS实现星星评分交互效果

    千次阅读 2014-11-29 11:59:50
    折腾:2颗星星+纯CSS实现星星评分交互效果 转载自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=3568 一、星星点灯,照亮我的家门 大家都喜欢...
  • 游戏运行时,Shader将张ETC1图片进行混合。  生成Alpha通道图的方法可参考: http://blog.csdn.net/u010153703/article/details/45502895  要配合ETC1+Alpha,还需要Shader支持,这里提供参考直接...
  • 然而,在计算机资源十分匮乏的年代,像“弹一”这样的尖端科技项目,科学家是如何完成那繁琐复杂的计算的呢? 中国“氢弹之父”于敏利用计算尺进行计算(新闻直播间) 传奇之尺,助力“弹一”辉煌 从原子弹...
  • js实现星星评分效果

    2015-11-10 10:18:00
    js实现星星评分效果:如图,当鼠标移至某个星星的时候出现相应的评分数,星星的颜色也会变! 1、在做这个之前,先准备好一张图片grading.png如下图,放到images文件夹下,路径为:images/grading.png 2、做一...
  • 二面:技术Leader,问了Glide存储方式,每一个Activity缓存图片是否分开缓存,算法相关考察了按层遍历二叉树,并输出每层的最后一个节点,并且进行了4 -5 种变化,每种变化实现方式。 在遇到问题的时候,面试官会...
  • 需要图片,一星星,一星星;(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样。 星星...
  • JQ实现星星评价(带半

    千次阅读 2017-07-28 17:09:29
    JQ实现星星评价效果
  • 星球简介 地点:β-410 星系,A-731电商星球。...这天我在 Nginx 转发服务器上遇见了请求小空 ,我跟小空说有重要消息不方便在现在告诉他,下班再约,然后就都匆匆赶路了,因为我俩都要快速将请求数据运送到订单.
  • android:interpolator="@android:anim/bounce_interpolator" 执行完毕之后会回弹跳跃几段(相当于我们高空掉下一皮球,到地面是会跳动几下) android:interpolator="@android:anim/cycle_interpolator" 循环,...
  • iOS评分(评价)星星

    千次阅读 2016-11-07 15:00:02
    截图: 起因:项目中往往涉及到用户的评分反馈,在我的“E中医”项目中,涉及到几处。对此我参考了美团和滴滴的评分图。 评分视图分为展示和评分种: (1)多数情况下“评分功能”是要简介...实现原理就是两图片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,978
精华内容 1,991
关键字:

两颗星的图片