写过一个星级评论的原生写法,非常复杂,今天就通过jquery来写一个简单的星级点亮的效果,来看代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .ct-star {
- display: inline-block;
- margin: 0 1px;
- width: 19px;
- height: 19px;
- background: url(img/stars.png) no-repeat;
- vertical-align: -2px;
- cursor: pointer;
- }
- .ic-star-off {
- background-position: -39px 0;
- }
- </style>
-
- </head>
- <body>
- <span class="star">
- <b class="ct-star ic-star-off"></b>
- <b class="ct-star ic-star-off"></b>
- <b class="ct-star ic-star-off"></b>
- <b class="ct-star ic-star-off"></b>
- <b class="ct-star ic-star-off"></b>
- </span>
- </body>
- <script src="js/jquery-1.11.3.min.js"></script>
- <script>
- $(function(){
- $(".star b").on("mouseenter",function(){
- $(this).removeClass("ic-star-off").prevAll().removeClass("ic-star-off");
- });
- $(".star").on("mouseleave",function(){
- $(this).children().addClass("ic-star-off");
- $("b.curr").removeClass("ic-star-off").prevAll().removeClass("ic-star-off");
- });
- $(".star b").on("click",function(){
- $(this).addClass("curr").siblings().removeClass("curr")
- })
- })
- </script>
- </html>
效果图就不展示了,将代码拷贝自己可以试试哦,一定要注意自己引用文件的路径!好了,今天就写这么一个简单的小例子。