js仿淘宝评价评分功能
效果图：
图（1）初始图
图（2）点击效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件上传</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
/*评分*/
ul{
height: 20px;
}
li{
list-style: none;
float: left;
width: 15px;
height: 20px;
}
.leftHeart{
background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751uq6u6vfsnsvdbqbp.png') no-repeat bottom left;
}
.rightHeart{
background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751crdjmidtdy4rmm1t.png') no-repeat bottom left;
}
.score{
font-size: 22px;
font-weight: bolder;
color: #ff0000;
}
</style>
</head>
<body onload="init()">
<!-- 评分 -->
<ul>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
<li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
得分：<span class="score"></span>
</ul>
<script>
$('.halfHeart:odd').css('padding-right', '5px');
var ifHover = true,
ifClick = true;
$('.halfHeart').mouseover(function(){
if (ifHover) {
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'top left');
}
$('.score').text(($(this).index()+1) * 0.5);
}
})
$('.halfHeart').mouseout(function(){
if (ifHover) {
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'bottom left');
}
}
})
$('.halfHeart').click(function(){
if (ifClick) {
ifHover = false;
ifClick = false;
for (var i = 0; i <= $(this).index(); i++) {
$('.halfHeart').eq(i).css('background-position', 'top left');
}
$('.score').text(($(this).index()+1) * 0.5);
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍js仿淘宝和百度文库的评分功能，包括了js仿淘宝和百度文库的评分功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了类似于淘宝和百度文库的评分功能，js实现，供大家参考，具体内容如下 效果如图： 五个五角星分别放在了一个table的五列中。下面是一个<p>,用来显示评分结果的；代码如下： body的onload事件绑定的是一个方法，js代码如下： js代码主要有三个函数
-
本文向大家介绍iOS评分（评价）星星图打分功能，包括了iOS评分（评价）星星图打分功能的使用技巧和注意事项，需要的朋友参考一下 下载地址：https://github.com/littleSunZheng/StarGradeView 起因：项目中往往涉及到用户的评分反馈，在我的“E中医”项目中，涉及到几处。对此我参考了美团和滴滴的评分图。 评分视图分为展示和评分两种： （1）多数情况下“评分功能
-
本文向大家介绍JS实现仿百度文库评分功能，包括了JS实现仿百度文库评分功能的使用技巧和注意事项，需要的朋友参考一下 百度文库分享平台大家都知道，今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能，先给大家展示效果图吧。 具体代码如下所示： 以上所述是小编给大家介绍的JS实现仿百度文库评分功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐
-
本文向大家介绍jquery实现类似淘宝星星评分功能有截图，包括了jquery实现类似淘宝星星评分功能有截图的使用技巧和注意事项，需要的朋友参考一下 html id="p"显示即时分数 id="score"显示最终分数---------------------------------------------- javascript“ 出现的效果是这样的： 可惜的是你一点击下去--就不可更改了。真的是
-
综述 “以古为镜，可以知兴替；以人为镜，可以明得失。” 本文采用编译器：jupyter 首先提出一个关于分类准确度的问题： 一个癌症预测系统，输入体检信息就可以判断病人是否患有癌症。 如果这个系统的预测准确度为99.9%，这个系统是好是坏？ 虽然99.9%的概率看上去比较大，但如果癌症产生的概率只有0.1%的话，我们辛辛苦苦做出来的系统和一个预测所有人都是健康的系统的性能完全相同；如果
-
本文向大家介绍纯js仿淘宝京东商品放大镜功能，包括了纯js仿淘宝京东商品放大镜功能的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！