CSS simple implementation of Pentagram score, like collection, display score (half star, 1/3 stars)

1. Preface

Before doing several projects, will encounter scoring, scoring, like this demand, wrote a lot of times, every time you need to write, will be turned out before the code, and then copy over. Always feel that the words did not progress, did not put the knowledge into the head, so, I spent 2 hours, the three types of demand to write their own demo and do a demonstration, so that the feeling of a word hit out of the code, it is really in the head. has been advocating to write a simple blog, also will star ratings, points like collection, display scores written three simple blog, but blog Park request blog to have space, so my three blog did not go to the blog home page, but I think this method should let more small partners know, so today did a summary, Hope to be able to show on the homepage of blog. Of course, if you do not want to see long, you can see the short version:

1. HTML super Simple implementation like (favorite) and cancel like effect
2. A simple star rating for a generous grounding gas
3. Advanced article of Pure css+ font realization pentagram (half star) rating

2. Detailed explanation

How to use:

1. The document needs to be declared as UTF-8 using the Unicode character set;
2. The following list of symbols is followed by two column numbers, the first column is for HTML, and when used in front of the &#;
3. The second column is used in the CSS file, it needs to be escaped with \, or it can be used in JS, just like the CSS usage, but escaped with \u;

Precautions :

98% of the characters can be displayed in the browser under the normal, in the actual operation, to be verified under the various browsers. Each browser may also show a slightly different effect.

List of character Atlas:

This character set will be used for these kinds of effects today, without reference:

2.1 How to use HTML to easily implement favorite favorites and cancel Favorites

2.1.1 CSS Styles

. like { font-size:66px;   color:#ccc; cursor:pointer;} /* Original style */. cs{color:#f00;} /* Show style after click */

2.1.2 HTML content

<class= "like">& #10084; </ P >

2.1.3 JS Code

<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 Display Effect

2.1.5 Summary: The CSS style has only two lines, the first line is to set the heart shape size and color, the second line is to click on the color of cardiac shape. An HTML line of code can show a heart shape. JS is used to click after the heart deformation from the original style into red. is not super simple and practical.

2.2 Simple atmosphere to achieve Pentagram rating

2.2.1 CSS Styles

. Cleanfloat::after{Display:Block;Clear:both;content:"";Visibility:Hidden;Height:0;} /* Clear FLOAT */ul Li{List-style:None;float: Left;font-size:30px;margin:5px;Color:#ccc;cursor:Pointer;} /* Pentagram style */. Hs,.cs{Color:#f00;} /* Pentagram Click after style */

2.2.2 HTML content

<ulclass= "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 Code

<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 Display Effect

2.2.5 Summary: If you want to do a project with such a scoring effect, you do not need to use the picture and then calculate the distance is so troublesome. This is directly used, style, size, can be casually controlled, very simple and practical. Isn't it.

2.3 css+ font for Pentagram (half star, 1/3 star) scoring effect

2.3.1 This use webfonticon font, I am sorry I will not upload fonts, children's shoes can teach me, you can download this font on their own.

2.3.2 CSS Styles

. Cleanfloat::after{Display:Block;Clear:both;content:"";Visibility:Hidden;Height:0;}        *{margin:0;padding:0;}/*font path is modified according to your path*/@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 content

<Div>      <Pclass= ' Cleanfloatstarfive sF1 '><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spandata-content= ' R '>R</span><b>4.7 min</b></P>      <Pclass= ' Cleanfloatstarfive sF2 '><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spandata-content= ' R '>R</span><span>R</span><b>3.5 min</b></P>      <Pclass= ' Cleanfloatstarfive sF3 '><spanclass= ' Org_star '>R</span><spanclass= ' Org_star '>R</span><spandata-content= ' R '>R</span><span>R</span><span>R</span><b>2.4 min</b></P> </Div>

2.3.4 Show

2.3.5 Summary: Is not very simple to achieve. The actual operation, we can follow this idea, and later encountered this effect is not necessary to use the image to splice. Super simple and practical.

3. This paper summarizes

Personally think that these kinds of situations to do the front-end words or will be very large probability encountered, I also hope that this article to help you, can let you learn knowledge, but also through this summary, so that their deeper understanding of the importance of learning! If this article is helpful to you, you can order a praise, thank you for your support, if you feel that there is no help to you or write bad, please advise.

CSS simple implementation of Pentagram score, like collection, display score (half star, 1/3 stars)