当我们在网上购物、点外卖等之后，都会有一个要求用户评分的步骤，常用的就是五星打分的效果，如下图：
那么怎样实现这个效果呢？
本篇文章将从零开始实现该效果。
使用工具
Jquery.js：Jquery是常用的javascript库，极大的简化了javascript开发。
素材：
（该图片来自于网上）。
开发步骤
搭建页面
新建index.html文件并引入jquery，新建index.js文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>评分效果</title>
</head>
<body>
<!--评分容器-->
<div class="score-container">
<!--星星 容器-->
<ul class="star">
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./star.png" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./star.png" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./star.png" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./star.png" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./star.png" alt=""></li>
</ul>
<!--打分-->
<span class="score"></span>
<!--提示框-->
<span class="tooltip"></span>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script>
</body>
</html>
对页面添加css，当星星处于激活状态时，我们给li标签添加一个active类，默认状态是灰色的,css代码如下：
.score-container{
position: relative;
}
/* 取消ul默认样式 */
.score-container ul{
list-style: none;
margin: 0;
padding: 0;
}
/* 相对定位 */
.score-container ul li{
float: left;
width: 20px;
height: 20px;
overflow: hidden;
position: relative;
margin-left: 6px;
}
/* 绝对定位，默认显示灰色 */
.score-container ul li img{
position:absolute;
left: 0;
top:0;
}
/* 激活时显示笑脸 */
.score-container ul li.active img{
top:-27px;
}
/* 分数 */
.score{
margin-left:6px;
color:#666;
display: none;
font-size: 12px;
}
/* 鼠标滑动时提示框 */
.tooltip{
position: absolute;
min-width: 100px;
min-height: 80px;
box-shadow: 1px 1px 3px #ccc;
border: 1px solid #666;
color:#666;
display: none;
font-size: 12px;
}
js 代码思路，当鼠标滑动到li 标签上时，获取该标签的位置索引index，将位置索引小于该index的li标签添加active类，而大于该index的移除active类。
index.js 代码：
;(function($){
$.fn.starScore=function(){
return this.each(function(){
var isScore=false; //标志是否评价过
var score=''; //得分
var toolTipText={
0:'非常差，很气愤',
1:'有点差',
2:'一般般',
3:'总体还好，有点小瑕疵',
4:'非常好，很满意',
}
var me=this;
var dom=$(this);
var starDom=dom.find('.star');
var scoreDom=dom.find('.score');
var toolTipDom=dom.find('.tooltip');
var liDom=starDom.children();
liDom.on('mouseenter',function(e){
var index=$(this).index();
toolTipDom.text(toolTipText[index]).css({
left:e.pageX+'px',
top:'20px'
}).show();
liDom.each(function(i,li){
if(i<=index){
$(li).addClass('active');
}else{
$(li).removeClass('active');
}
});
}).on('mouseleave',function(){
var index=$(this).index();
toolTipDom.hide();
if(isScore){
liDom.each(function(i,li){
if(i<=score-1){
$(li).addClass('active');
}else{
$(li).removeClass('active');
}
});
}else{
liDom.removeClass('active');
}
}).on('click',function(){
score=$(this).index()+1;
scoreDom.text('('+score+'分'+')').show();
isScore=true; //点击后就算是评价过了
});
});
}
})(jQuery);
调用方式：
$('.score-container').starScore();
总体效果如下：
要注意的是：
1、index.js为什么最前面要加一个’;’？
为了防止多个文件连接在一起出错
2、(function(){})() 形式是什么意思？
一个自执行函数
3. $.fn 是什么意思？
jQuery.fn === jQuery.prototype，该方法会被扩展在原型上。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦