简单实现评价星级

最新推荐文章于 2022-05-27 22:22:00 发布

ZL_do_it

最新推荐文章于 2022-05-27 22:22:00 发布

阅读量794

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/ZL_do_it/article/details/106342624

版权

本文介绍了如何利用CSS和JavaScript实现星级评价功能。通过创建背景图并利用类选择符切换样式，实现在鼠标悬停和点击时改变星星的状态，从而达到动态显示点亮星级的效果。

摘要由CSDN通过智能技术生成

星级评价实现方法

本节内容是关于如何实现星级评价，在我们当前的生活中，我们在购买某件产品或者乘坐滴滴车，都会让我们给出一个评价，我们可以给这个产品或者服务打分，通常是一到五颗星，那么这是如何实现的呢？

首先，我们要准备好一张展示图：
我们可以看到这张图上有两颗大小相等的星星，但是一个是灰色的，一个是金黄色的，是被点亮的。那么我们为什么要准备这么一张图呢，它有什么用处呢？
在这之前，我们需要明白我们平时给评价时是怎样的展示效果
一般而言，我们在给评价时，我们的鼠标放在哪一颗星上，那么包括这一颗星在内的前几颗星都会被点亮，当我们鼠标移出时，所有星星都会暗下去，当我们点击某一颗星时，那么包括这这一颗星在内的前几颗星都会一直处于点亮状态，并且在未提交之前，都可以通过鼠标点击改变星级。
那么这里如何实现点亮呢？我们就可以通过一开始准备好的这张图来进行展示，首先我们通过css样式将其设置为背景图，然后设置其摆放位置，通过上下平移调整展示区域，这里我们就可以设置两个css样式，可以通过类选择符或者id选择符去设置样式，一个样式设置上半边灰色星星为背景图，另一个样式设置下半边金黄色星星为背景图，当我们需要点亮这颗星星的时候，就可以去改变当前标签的属性名称
样式代码：

		.aa{
   
            width: 30px;
            height: 30px;
            float: left;
            background-image: url(./image/star.gif);
            background-repeat: no-repeat;
        }
        .bb{
   
            width: 30px;
            height: 30px;
            float: left;
            background-image: url(./image