每日分享效果,今天分享一个jQuery滑动星星评分效果。
jQuery星星评分制作5颗星星鼠标滑过评分打分效果,可取消评分结果,重新打分。
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/css.css" rel="external nofollow" >
<script src="js/jquery.js"></script>
</head>
<body>
<div id="starRating">
<p class="photo">
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
</p>
<p class="starNum">0.0分</p>
<div class="bottoms">
<a class="garyBtn cancleStar">取消评分</a><a class="blueBtn sureStar">确认</a>
</div>
</div>
<script>
$(function () {
//评分
var starRating = 0;
$('.photo span').on('mouseenter',function () {
var index = $(this).index()+1;
$(this).prevAll().find('.high').css('z-index',1)
$(this).find('.high').css('z-index',1)
$(this).nextAll().find('.high').css('z-index',0)
$('.starNum').html((index*2).toFixed(1)+'分')
})
$('.photo').on('mouseleave',function () {
$(this).find('.high').css('z-index',0)
var count = starRating / 2
if(count == 5) {
$('.photo span').find('.high').css('z-index',1);
} else {
$('.photo span').eq(count).prevAll().find('.high').css('z-index',1);
}
$('.starNum').html(starRating.toFixed(1)+'分')
})
$('.photo span').on('click',function () {
var index = $(this).index()+1;
$(this).prevAll().find('.high').css('z-index',1)
$(this).find('.high').css('z-index',1)
starRating = index*2;
$('.starNum').html(starRating.toFixed(1)+'分');
alert('评分:'+(starRating.toFixed(1)+'分'))
})
//取消评分
$('.cancleStar').on('click',function () {
starRating = 0;
$('.photo span').find('.high').css('z-index',0);
$('.starNum').html(starRating.toFixed(1)+'分');
})
//确定评分
$('.sureStar').on('click',function () {
if(starRating===0) {
alert('最低一颗星!');
} else {
alert('评分:'+(starRating.toFixed(1)+'分'))










