2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jquery简单几句代码实现星级评论效果

时间:04-05来源:作者:点击数:33

写过一个星级评论的原生写法,非常复杂,今天就通过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>

效果图就不展示了,将代码拷贝自己可以试试哦,一定要注意自己引用文件的路径!好了,今天就写这么一个简单的小例子。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门