通过本文主要向大家介绍了星级评分等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
首先看一下运行效果如下图所示。
鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮。
一、原理
本程序的原理是这样的：一个“ul”标签，该标签的背景为灰色的星星，控制“ul”标签的宽度显示星星的数量。例如：一个星星图片的宽度为23px，那么要显示10个星星，则“ul”的宽度为230px就可以显示10个星星。
n个“li”标签，n表示您要显示星星的个数，例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度23px，2个星星的宽度46px，......，10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。
则另外还有一个“li”标签记录鼠标单击的星星或初始设置。
这些标签都是重叠在一起的，通过鼠标滑动效果切换这些标签的层叠顺序，显示不同的星星数量，单击记录星星个数。
二、源码