JS实现星星评分功能实例代码(两种方法)


Posted in Javascript onJune 09, 2016

一、方法1

1、用到图片

JS实现星星评分功能实例代码(两种方法)

2、结构和样式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 ul {
  padding-left: 0;
  overflow: hidden;
 }
 ul li {
  float: left;
  list-style: none;
  width: 27px;
  height: 27px;
  background: url(img/star.gif)
 }
 ul li a {
  display: block;
  width: 100%;
  padding-top: 27px;
  overflow: hidden;
 }
 ul li.light {
  background-position: 0 -29px;
 }
 </style>
</head>
<body>
 <ul>
  <li class="light"><a href="javascript:;">1</a></li>
  <li><a href="javascript:;">2</a></li>
  <li><a href="javascript:;">3</a></li>
  <li><a href="javascript:;">4</a></li>
  <li><a href="javascript:;">5</a></li>
 </ul>
</body>
</html>

li加了light的class就会变成亮星,就是换了背景位置,把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。

效果:

JS实现星星评分功能实例代码(两种方法)

3、交互js

<script>
var num=finalnum = tempnum= 0;
var lis = document.getElementsByTagName("li");
//num:传入点亮星星的个数
//finalnum:最终点亮星星的个数
//tempnum:一个中间值
function fnShow(num) {
 finalnum= num || tempnum;//如果传入的num为0,则finalnum取tempnum的值
 for (var i = 0; i < lis.length; i++) {
  lis[i].className = i < finalnum? "light" : "";//点亮星星就是加class为light的样式
 }
}
for (var i = 1; i <= lis.length; i++) {
 lis[i - 1].index = i;
 lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
  fnShow(this.index);//传入的值为正,就是finalnum
 }
 lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
  fnShow(0);//传入值为0,finalnum为tempnum,初始为0
 }
 lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
  tempnum= this.index;
 }
}
</script>

这样设计的一个关键点在于,mouout时保存一个值用于让星星变暗,初始为0(0颗星变亮就是全暗),不点击的话只要鼠标离开所有星星都是暗的,click事件会触发一次mouseover和一次mouseout,所以点击时改变tempnum确定鼠标离开时几颗星亮,这个值会一直保持,直到下次点击时改变它。

最终效果:

JS实现星星评分功能实例代码(两种方法)

二、方法2

1、用到图片

JS实现星星评分功能实例代码(两种方法)JS实现星星评分功能实例代码(两种方法)

2、效果如下

JS实现星星评分功能实例代码(两种方法)

3、完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>demo of starof</title>
 <style>
 ul{padding:0;margin: 0;}
 li{list-style: none;}
 /*星星评分*/
 .scoremark{width:154px;position:relative;margin-top:50px;}
 .scoremark .score {
  float: right;
  display: block;
  margin: 0 0 0 10px;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: #f70;
 }
 .scoremark .star {
  float: right;
  display: block;
  position: relative;
  width: 116px;
  height: 20px;
  background: url(img/star.png) no-repeat 0px -20px;
 }
 .scoremark .ystar {
  position: absolute;
  top: 0;
  left: 0;
  width: 116px;
  height: 20px;
  background: url(img/star.png) no-repeat 0px 0px;
 }
 .scoremark .star ul {
  width: 120px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
 }
 .scoremark .star ul:hover {
  background: url(img/star.png) no-repeat 0px -20px;
 }
 .scoremark .star li {
  float: left;
  width: 24px;
  height: 20px;
 }
 .scoremark .star li a {
  display: block;
  width: 24px;
  height: 20px;
  overflow: hidden;
  text-indent: -9999px;
  position: absolute;
  z-index: 5;
 }
 .scoremark .star li a:hover {
  background: url(img/star.png) no-repeat 0px 0px;
  z-index: 3;
  left: 0
 }
 .scoremark .star a.one-star {
  left: 0;
 }
 .scoremark .star a.one-star:hover {
  width: 24px
 }
 .scoremark .star a.two-stars {
  left: 24px;
 }
 .scoremark .star a.two-stars:hover {
  width: 48px
 }
 .scoremark .star a.three-stars {
  left: 48px;
 }
 .scoremark .star a.three-stars:hover {
  width: 72px
 }
 .scoremark .star a.four-stars {
  left: 72px;
 }
 .scoremark .star a.four-stars:hover {
  width: 96px
 }
 .scoremark .star a.five-stars {
  left: 96px;
 }
 .scoremark .star a.five-stars:hover {
  width: 120px;
 }
 .scoremark .tips {
  position: absolute;
  top: -28px;
  left: 0;
  width: 40px;
  height: 21px;
  color: #333;
  line-height: 20px;
  padding: 0 0 5px 0;
  text-align: center;
  background: url(img/ico.png) no-repeat;
  z-index: 6;
  font-size: 12px;
 }
 </style>
 <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
 <div id="scoremark" class="scoremark scores">
      <em class="score">8.0</em>
      <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
      <div style="left: 0px; display: none;" class="tips"></div>
   </div>
<script>
//星星评分
starScore($(".scoremark"));
function starScore(star){
 star.find(".star ul li a").mouseenter(function(){
  var txt = $(this).attr("data-name");
  var x = $(this).parent("li").index();
  star.find(".tips").html(txt).css("left",-6+x*24).show();
 });
 star.find(".star ul li a").mouseleave(function(){
  star.find(".tips").html("").css("left",0).hide();
 }); 
}
</script>
</body>
</html>

4、原理

4.1html结构

<div id="scoremark" class="scoremark scores">
      <em class="score">8.0</em>
      <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
      <div style="left: 0px; display: none;" class="tips"></div>
   </div>

简单描述下原理:主要是多层背景的覆盖关系

首先是结构:.star下面包含了两层,一层是ystar,一层是ul。

4.1、实现4个星星的评分效果

外层.star定宽,背景图为空心灰色的星星。

里面.ystar代表点亮的星星,它的背景是实心的黄色星星,如果有4颗亮星,就设置.ystar的宽度为80%。2颗为40%。

4.2、实现鼠标hover上去星星点亮的效果

主要是通过css控制。关键是通过:hover实现的。

ul:hover时加上了空心灰色的星星背景图。

a:hover时,宽度变成前几个星星的宽度。

这样在hover时,其实有4层背景,比如第二个星星hover时,从下到上依次是

.star 暗星100%宽度.ystar 亮星 80宽度ul 暗星100%宽度.two-stars 40%宽度

4.3、鼠标hover显示tip

通过js获取a的data-name实现。

以上所述是小编给大家介绍的JS实现星星评分功能实例代码(两种方法)的详细内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
Node.js中npm常用命令大全
Jun 09 #Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 #Javascript
Active控件问题小结(附解决办法)
Jun 09 #Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 #Javascript
JavaScript的instanceof运算符学习教程
Jun 08 #Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 #Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python实现Const详解
2015/01/27 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python动态网页批量爬取
2016/02/14 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
《一株紫丁香》教学反思
2014/02/19 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
学雷锋月活动总结
2014/04/25 职场文书
2019财务毕业实习报告
2019/06/27 职场文书