Web page constant Dynamic effect--rating

Use the variable score record click Index, when the mouse left with score instead of index to complete the effect

Html:

        <Divclass= "box">            <ul>                <binclass= "Current"></Li>                <Li></Li>                <Li></Li>                <Li></Li>                <Li></Li>            </ul>            <P>Comments are divided into<span></span></P>        </Div>

Css:

1 . Box{2 width:150px;3 margin:100px Auto;4}5 . Box Li{6 width:27px;7 Height:28px;8 background:URL (images/star.gif) 0 0 no-repeat;9 float: Left;Ten Margin-right:3px; One} A . Box Li.current{ - background-position:0 Bottom; -}

JQ:

1JQuery (document). Ready (function($) {2                 varScore = 0;//Initialize variables to store fractions3$ ('. Box Li '). Click (function(){4                     varIndex = $ ( This). index ();5$ (". Box Li:lt (" + (index+1) + ")"). AddClass (' current ');6$ (". Box Li:gt (" + (Index) + ")"). Removeclass (' current ');7                     //score = index after completion;8Score =index;9$ (' span '). HTML (index+1);Ten                 }); One$ ('. Box Li '). Hover (function() { A                     varIndex = $ ( This). index (); -$ (". Box Li:lt (" + (index+1) + ")"). AddClass (' current '); -$ (". Box Li:gt (" + (Index) + ")"). Removeclass (' current '); the},function() { -$ (". Box Li:lt (" + (score+1) + ")"). AddClass (' current '); -$ (". Box Li:gt (" + (Score) + ")"). Removeclass (' current '); -                 }); +});

Web page constant Dynamic effect--rating