Css is simple to achieve pentagram rating, thumb up favorites, display rating (half star, 1/3 star), css star

Css is simple to achieve pentagram rating, thumb up favorites, display rating (half star, 1/3 star), css star

1. Preface

In the previous several projects, you may encounter the requirements of scoring, scoring, and thumb ups. You have written many times. When you need to write more times, you will find the code you have previously written, then copy it. I always felt that there was no progress in this case and I didn't put my knowledge into my head. So I spent two hours writing a demo and demonstrating these three types of requirements. In this case, I feel that the code I typed is indeed in my head. I have always advocated writing simple blogs, and I have also written three simple blogs with five-star ratings, thumb-up favorites, and presentation ratings. However, the blog park requires that the blog have a length, so my three blogs didn't go to the homepage of the blog garden, but I think this method should be known to more friends, so I made a summary today, I hope to display it on the blog homepage. Of course, if you don't want to read long articles, you can read the short version on your own:

2. Detailed explanation

Usage:

Note:

98% characters can be normally displayed in the browser. In actual operations, verify the characters in each browser. The effects of each browser may be slightly different.

Character gallery list:

All the effects mentioned today use this character set, which does not need to be referenced:

2.1 How to Use html to easily add likes to favorites and remove favorites

 

2.1.1 css style

. Like {font-size: 66px; color: # ccc; cursor: pointer;}/* original style */. cs {color: # f00;}/* style displayed after clicking */

2.1.2 html content

<p 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 Results

2.1.5 conclusion: there are only two rows of css styles. The first line is to set the heart size and color, and the second line is the color of the heart after clicking. A line of html code shows a heart shape. Js is used to change the heart shape from the original style to red after clicking. Is it super simple and practical.

2.2 simple atmosphere to achieve star rating

2.2.1 css style

. Cleanfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0 ;}/ * clear floating */ul li {list-style: none; float: left; font-size: 30px; margin: 5px; color: # ccc; cursor: pointer;}/* pentagram style */. hs ,. cs {color: # f00;}/* after a pentagram click style */

2.2.2 html content

<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 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 Results

2.2.5 conclusion: If you want to make such a score in your project, you do not need to use images to calculate the distance. This can be used directly. Style and size can be controlled at will, which is very simple and practical. Right.

2.3 css + font for pentagram (half star, 1/3 star) rating

2.3.1 this is usedWebFontIconFont. Sorry, I don't know how to upload the font. You can teach me how to download the font by yourself.

2.3.2 css style

. Cleanfloat: after {display: block; clear: both; content: ""; visibility: hidden; height: 0 ;}* {margin: 0; padding: 0 ;} /* modify the font path 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> <p class = 'cleanfloat starFive sf1'> <span class = 'org _ start'> 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 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 data-content = 'r '> R </span> <span> R </span> <B> score: 2.4 </B> </p> </div>

2.3.4 presentation

2.3.5 conclusion: is it easy to implement. In practice, you can follow this idea. You don't need to splice images for this effect in the future. Super simple and practical.

3. Summary

I personally think that these situations may still be very likely to happen. I also hope this article will be helpful to you, so that you can learn and summarize it, let yourself better understand the importance of learning! If this article is helpful to you, please give me a thumbs up and thank you for your support. If you feel that it has not helped you or is not well written, please advise.