JQuery's method of imitating the rating function of Five Stars Based on layers
This article mainly introduces jQuery's method of imitating the evaluation function of Five Stars Based on layers, and uses jQuery to dynamically modify the element background color to implement the star evaluation function. For more information, see
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<! 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> untitled document </title> <Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script> <Script> $ (Function (){ $ (". Star li"). mouseenter (function (){ $ (". Star li" ).css ("background", "# f60 "); Certificate (this).css ("background", "# f60 "); Certificate (this).nextall().css ("background", "# ccc "); }) }); </Script> <Style type = "text/css"> * {<Br/> Padding: 0; margin: 0; List-style: none; float: left; } . Star li { Float: left; Height: 20px; Width: 20px; Background-color: # CCC; Margin-right: 4px; } </Style> </Head> <Body> <Div> select a few stars: </div> <Ul class = "star"> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> </Ul> </Body> </Html> |
I hope this article will help you with jQuery programming.