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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
利用vue实现模态框组件
Dec 19 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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安装攻略:常见问题解答(一)
2006/10/09 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php数组查找函数总结
2014/11/18 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Angular4学习笔记router的简单使用
2018/03/30 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
angular的输入和输出的使用方法
2018/09/22 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python对wav文件的重采样实例
2020/02/25 Python
检查接待方案
2014/02/27 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
升学宴答谢词
2015/01/05 职场文书
学生检讨书
2015/01/27 职场文书
华清池导游词
2015/02/02 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python