jQuery实现滑动星星评分效果(每日分享)


Posted in jQuery onNovember 13, 2019

每日分享效果,今天分享一个jQuery滑动星星评分效果。

jQuery星星评分制作5颗星星鼠标滑过评分打分效果,可取消评分结果,重新打分。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/css.css" rel="external nofollow" >
  <script src="js/jquery.js"></script>
</head>
<body>
<div id="starRating">
  <p class="photo">
    <span><i class="high"></i><i class="nohigh"></i></span>
    <span><i class="high"></i><i class="nohigh"></i></span>
    <span><i class="high"></i><i class="nohigh"></i></span>
    <span><i class="high"></i><i class="nohigh"></i></span>
    <span><i class="high"></i><i class="nohigh"></i></span>
  </p>
  <p class="starNum">0.0分</p>
  <div class="bottoms">
    <a class="garyBtn cancleStar">取消评分</a><a class="blueBtn sureStar">确认</a>
  </div>
</div>
<script>
  $(function () {
    //评分
    var starRating = 0;
    $('.photo span').on('mouseenter',function () {
      var index = $(this).index()+1;
      $(this).prevAll().find('.high').css('z-index',1)
      $(this).find('.high').css('z-index',1)
      $(this).nextAll().find('.high').css('z-index',0)
      $('.starNum').html((index*2).toFixed(1)+'分')
    })
    $('.photo').on('mouseleave',function () {
      $(this).find('.high').css('z-index',0)
      var count = starRating / 2
      if(count == 5) {
        $('.photo span').find('.high').css('z-index',1);
      } else {
        $('.photo span').eq(count).prevAll().find('.high').css('z-index',1);
      }
      $('.starNum').html(starRating.toFixed(1)+'分')
    })
    $('.photo span').on('click',function () {
      var index = $(this).index()+1;
      $(this).prevAll().find('.high').css('z-index',1)
      $(this).find('.high').css('z-index',1)
      starRating = index*2;
      $('.starNum').html(starRating.toFixed(1)+'分');
      alert('评分:'+(starRating.toFixed(1)+'分'))
    })
    //取消评分
    $('.cancleStar').on('click',function () {
      starRating = 0;
      $('.photo span').find('.high').css('z-index',0);
      $('.starNum').html(starRating.toFixed(1)+'分');
    })
    //确定评分
    $('.sureStar').on('click',function () {
      if(starRating===0) {
        alert('最低一颗星!');
      } else {
        alert('评分:'+(starRating.toFixed(1)+'分'))
      }
    })
  })
</script>
</body>
</html>

CSS代码:

#starRating .photo span {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 42px;
  overflow: hidden;
  margin-right: 23px;
  cursor: pointer;
}
#starRating .photo span:last-child {
  margin-right: 0px;
}
#starRating .photo span .nohigh {
  position: absolute;
  width: 44px;
  height: 42px;
  top: 0;
  left: 0;
  background: url("../img/star.png");
}
#starRating .photo span .high {
  position: absolute;
  width: 44px;
  height: 42px;
  top: 0;
  left: 0;
  background: url("../img/star1.png");
}
#starRating .starNum {
  font-size: 26px;
  color: #de4414;
  margin-top: 4px;
  margin-bottom: 10px;
}
#starRating .bottoms {
  height: 54px;
  border-top: 1px solid #d8d8d8;
}
#starRating .photo {
  margin-top: 30px;
}
#starRating .bottoms a {
  margin-bottom: 0;
}
#starRating .bottoms .garyBtn {
  margin-right: 57px!important;
}
#starRating .bottoms a {
  width: 130px;
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  display: inline-block;
  font-size: 16px;
  transition: all 0.2s linear;
  margin: 16px 0 22px;
  text-align: center;
  cursor: pointer;
}
.garyBtn {
  margin-right: 60px!important;
  background-color: #e1e1e1;
  color: #999999;
}
.blueBtn {
  background-color: #1968b1;
  color: #fff;
}
.blueBtn:hover {
  background: #0e73d0;
}

总结

以上所述是小编给大家介绍的jQuery实现滑动星星评分效果(每日分享),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
jquery获取input输入框中的值
Nov 13 #jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 #jQuery
jquery ajax 请求小技巧实例分析
Nov 11 #jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Laravel下生成验证码的类
2017/11/15 PHP
javascript 禁止复制网页
2009/06/11 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
python设计模式大全
2016/06/27 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
二年级小学生评语
2014/04/21 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
法院授权委托书范文
2014/08/02 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
2015年入党决心书
2015/02/05 职场文书
卖车协议书范文
2016/03/23 职场文书