What is star rating? It is a common article evaluation system on the Internet. It can rate articles, videos, and so on that you are interested in. Let's take a look at the running effect. Maybe you will understand it.
The initial status is the status when the page is loaded. 1:
Figure 1
If you move the mouse over the stars, he will put the star variable in front of the gas. For example, if you move the mouse to the eighth star, the first eight stars will be colored, as shown in 2:
Figure 2
If you click the mouse, the status 2 selected by the current user is recorded. If you do not click the mouse, the status 1 is restored.
First, let's take a look at the html code, which contains all JavaScript code. The specific code is as follows:
Reference content is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> Star voting </title> <! -- Introduce the css file --> <Link href = "pic/css.css" rel = "stylesheet" type = "text/css"/> <! -- Introduce the jquery file --> <Script src = "js/jquery. js"> </script> <Script type = "text/javascript"> // Define a function to record the star state Function SaveClass () { Var temClassArry = new Array () $ ("# UserStart> li"). each (function (I ){ TemClassArry [I] = $ (this). attr ("class "); }) Return temClassArry; } $ (Document). ready (function (){ Var temparray = SaveClass (); // Move the mouse over the stars $ ("# UserStart> li"). mousemove ( Function (){ Var currentCount = 0; CurrentCount = $ ("# UserStart> li"). index ($ (this) [0]) $ ("# UserStart> li"). each (function (I) {if (I <= currentCount) { $ (This). removeClass (); $ (This). addClass ("on "); } Else { $ (This). removeClass (); $ (This). addClass ("off "); }}) } ) // Click on the stars . Click (function (){ Temparray = SaveClass (); }) // Move the mouse out of the stars . Mouseout (function (){ $ ("# UserStart> li"). each (function (I ){ $ (This). removeClass (); $ (This). addClass (temparray [I]); }) }) }); </Script> </Head> <Body> <Ul class = "star" id = "UserStart"> <Li class = "on"> </li> <Li class = "on"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> <Li class = "off"> </li> </Ul> </Body> </Html> |
There is also a. css file that records the style file to control the star style. The specific css code is as follows:
Reference content is as follows: @ Charset "UTF-8 "; . Star li { Float: left; Width: 25px; Background: url('sprit1.png ') no-repeat 0-pixel PX; } . Star li. on { Float: left; Width: 25px; Background-position: 0-pixel PX; } . Star li { Float: left; Width: 25px; Cursor: pointer; } . Star li. off { Float: left; Width: 25px; Background-position: 0-490px; }
|
Source File Download:Start_quote.rar