JavaScript实现星星等级评价功能


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现星星等级评价功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container{
      float:left;
    }
    .score{
      float: left;
      position: relative;
      width: 100px;
      margin-top: 5px;
      margin-left: 10px;
    }
    span{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
    }
    .scoreDisplay{
      display: block;
    }
  </style>
  <script src="jquery-1.12.2.min.js"></script>
</head>
<body>
<!--  一个容器里面放5张图片,先所有的都空星图片-->
<!--  该案例的要点就是在于鼠标移动上去时改变图片的src-->
<div class="container">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
</div>
<div class="score">
  <span>很差</span>
  <span>较差</span>
  <span>一般</span>
  <span>较好</span>
  <span>很好</span>
</div>
<script>
  var img = $(".container img");//获取5张图片的集合
  var span = $(".score span");
  var i,j,k;//定义变量i,j,k
  k = -1;//k给予一个初始值-1,,不然后面第1个星星始终是被点亮的
  img.mouseenter(function(){ //设置鼠标进入时的效果,首先将所有的星星熄灭,然后再根据用户鼠标进入的星星下标值点亮星星
    span.removeClass("scoreDisplay");//鼠标进入时,将右边的评论清除掉
    img.attr("src",".idea/empty.png");
    i = img.index(this);
    for(j=0;j<=i;j++)
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    span.eq(i).addClass("scoreDisplay");//根据用户进入的i值来显示评论
  }).mouseleave(function(){  //仍然是将所有的星星熄灭,然后根据k值来点亮星星
    span.removeClass("scoreDisplay");//鼠标离开时,首先清除掉评论
    img.attr("src",".idea/empty.png");//接下来将所有星星变为空星
    for(j=0;j<=k;j++)//根据最终值k值来确定点亮几颗星星
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    if(k==-1)//如果k值=-1,则不显示任何一个评论内容
    {
      span.removeClass("scoreDisplay");
    }
    else{
      span.eq(k).addClass("scoreDisplay");//根据最终值k值显示评论
    }
  });
  $("img").click(function(){ //k记录用户点击鼠标时的星星下标值
    k = img.index(this);
  })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
You might like
php中addslashes函数与sql防注入
2014/11/17 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python单例设计模式实现解析
2020/01/07 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
任意存:BOXFUL
2018/05/21 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
教师开学感言
2014/02/14 职场文书
《桥》教学反思
2014/04/09 职场文书
大学班级学风建设方案
2014/05/01 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
导游词之扬州大明寺
2019/10/09 职场文书