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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery实现垂直手风琴导航栏
Feb 18 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多文件上传功能实现原理及代码
2013/04/18 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
javaScript语法总结
2016/11/25 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
整理Python中的赋值运算符
2015/05/13 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
关于Python数据结构中字典的心得
2017/12/04 Python
如何解决安装python3.6.1失败
2020/07/01 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python中entry用法讲解
2020/12/04 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
文明寄语大全
2014/04/11 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
歌剧魅影观后感
2015/06/05 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers