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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
window.location.hash知识汇总
Nov 09 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php实现每日签到功能
2018/11/29 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
JS的反射问题
2010/04/07 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
毕业生就业协议书
2014/04/11 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2015年母亲节寄语
2015/03/23 职场文书
爱国影片观后感
2015/06/18 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers