Css achieves the scoring effect and css scoring Effect

Css achieves the scoring effect and css scoring Effect

Css implements the scoring effect, which is actually an extension of css sprites (css genie). The effect is implemented mainly by moving the image position by the background-position attribute. I have seen some predecessors have written about this, and there is a slight deviation in understanding.

My understanding: Some people think that the position of the background-position is moving. This attribute is equivalent to moving the vertex of the div to the vertex position of the target small image,

See: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html,In my opinion, the position of the div remains unchanged and becomes the position of the image. You can use the background-position function to locate the required small icon to the position 0 and 0 of the div to display the small icon. In addition, the value of background-position must be negative, indicating that the image is moved up.

The blog on which a single icon is positioned is detailed, so you can write the five-star rating directly to achieve the following:

To better understand the chart, we processed it:

Step 1:

Develop good programming habits to put each part of the function into an independent part for encapsulation, so set a div element here:

<div class="rating"></div>

 

Step 2:

Because the five-star rating requires five blocks without borders, it is natural to use ul and li tags to unify the five blocks. Because of the click effect, the bearing element is a tag:

<div class="rating">    <ul>        <li class="one">   <a href="#">1</a></li>        <li class="two">   <a href="#">2</a></li>        <li class="three"> <a href="#">3</a></li>        <li class="four">  <a href="#">4</a></li>        <li class="five">  <a href="#">5</a></li>    </ul></div>

Step 3:

After the structure is set up, css design is started:

 

Ul. rating {position: relative; list-style: none; background: url (".. /images/star-matrix.gif ") no-repeat 0 0; width: 80px; height: 16px;} ul. rating li {float: left; text-indent:-9999px; cursor: pointer;} ul. rating li a {text-decoration: none; display: inline-block; width: 16px; height: 16px; position: absolute; top: 0; left: 0;Z-index: 10;/* compare it with the z-index in hover to achieve another important effect. See the following description for preliminary design */}/* Only locate the area of tag A to the UL area that appears */ul. rating li. one a {top: 0; left: 0;} ul. rating li. two a {top: 0px; left: 16px;} ul. rating li. three a {top: 0px; left: 32px;} ul. rating li. four a {top: 0px; left: 48px;} ul. rating li. five a {top: 0px; left: 64px ;}

Step 4: the preliminary results are basically achieved through the above Code, followed by the effects of mouse over the stars:

The idea is that when you place the cursor on the current A tag, the area of the tag becomes as large as that of the UL region, and the corresponding part is located through the background-position attribute, and place it on the blank stars. Ul. rating li a: hover {width: 80px; height: 16px; overflow: hidden; left: 0; top: 0; background: url (".. /images/star-matrix.gif ") no-repeat 0 0; z-index: 2; /* to enable the background image hiding function, use z-index to make the current corresponding image layer move above the source Image Layer */} ul. rating li. one a: hover {background-position: 0-96px;} ul. rating li. two a: hover {background-position: 0-pixel PX;} ul. rating li. three a: hover {background-position: 0-128px;} ul. rating li. four a: hover {background-position: 0-144px;} ul. rating li. five a: hover {background-position: 0-160px ;}

Step 5: now we have completed the 5-point high praise effect (Step 3 does not use the z-index attribute, bold), but when the mouse slides out, we can only choose one score, not backward or forward, the reason is that all A in LI is covered in the bottom layer. Therefore, in step 3, use the z-index attribute to enable the upper layer of A tag at the moment, in order to respond to the effects of mouse pointer floating on the elements.