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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python使用mysql数据库示例代码
2017/05/21 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
就业自我评价
2014/02/04 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
教师演讲稿大全
2014/05/16 职场文书
个人合伙协议书范本
2014/10/14 职场文书
博士给导师的自荐信
2015/03/06 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS