JQuery-based star rating effect (source code)

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.