【jQuery】仿淘宝五星评价打分的实现

最新推荐文章于 2021-12-11 17:34:31 发布

励志故事

最新推荐文章于 2021-12-11 17:34:31 发布

阅读量1w

点赞数 5

分类专栏： Web前端文章标签： jQuery实现五星评价仿淘宝五星评价仿淘宝星星打分 jQuery

本文链接：https://blog.csdn.net/LZGS_4/article/details/47913629

版权

本文详细介绍了如何利用jQuery实现模仿淘宝五星评价的打分功能。当鼠标悬停在星星上时，会高亮显示当前及之前星星，并显示对应评分的描述。点击后保存评分，移开鼠标则显示已选分数。读者可以通过源码进一步理解实现细节。

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

我的上一篇博文写到了评价分数的五星显示，这篇博文将介绍如何实现打分的效果。

首先，我们还是先分析我们想要的效果。

1.当鼠标移到星星上面的时候，当前星星以及前面的星星要亮起来，然后星星的右侧出现提示语，1星：很差，2星：比较差，3星：一般，4星：比较好，5星：很好。

2.当鼠标点击的时候，打分，这个时候当前星星以及前面的星星要亮起来，提示语也要隐藏。

3.但鼠标移开是，就显示我此前打得分数。

我这么说可能也有点不太清楚，大家可以到淘宝感受感受，也可以下载我的源码看看（http://pan.baidu.com/s/1c0ruT3q），下面直接贴代码：

<html>
<head>
<meta charset="utf-8">	
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
	<div>
		<a href="javascript:click(1)"><img src="img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a>
		<a href="javascript:click(2)"><img src="img/star.png" id="star2" onMouseOver="over(2)" onMouseOut&

最低0.47元/天解锁文章

励志故事

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示，这篇博文将介绍如何实现打分的效果。首先，我们还是先分析我们想要的效果。1.当鼠标移到星星上面的时候，当前星星以及前面的星星要亮起来，然后星星的右侧出现提示语，1星：很差，2星：比较差，3星：一般，4星：比较好，5星：很好。2.当鼠标点击的时候，打分，这个时候当前星星以及前面的星星要亮起来，提示语也要隐藏。3.但鼠标移开是，就显示我此前打得分数
复制链接

扫一扫

专栏目录