css滑动星星评分,jQuery实现滑动星星评分效果(每日分享)

每日分享效果，今天分享一个jQuery滑动星星评分效果。

jQuery星星评分制作5颗星星鼠标滑过评分打分效果，可取消评分结果，重新打分。

HTML代码：

Title

0.0分

取消评分确认

$(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)+'分'))

}

})

})

CSS代码：

#starRating .photo span {

position: relative;

display: inline-block;

width: 44px;

height: 42px;

overflow: hidden;

margin-right: 23px;

cursor: pointer;

}

#starRating .photo span:last-child {

margin-right: 0px;

}

#starRating .photo span .nohigh {

position: absolute;

width: 44px;

height: 42px;

top: 0;

left: 0;

background: url("../img/star.png");

}

#starRating .photo span .high {

position: absolute;

width: 44px;

height: 42px;

top: 0;

left: 0;

background: url("../img/star1.png");

}

#starRating .starNum {

font-size: 26px;

color: #de4414;

margin-top: 4px;

margin-bottom: 10px;

}

#starRating .bottoms {

height: 54px;

border-top: 1px solid #d8d8d8;

}

#starRating .photo {

margin-top: 30px;

}

#starRating .bottoms a {

margin-bottom: 0;

}

#starRating .bottoms .garyBtn {

margin-right: 57px!important;

}

#starRating .bottoms a {

width: 130px;

height: 35px;

line-height: 35px;

border-radius: 3px;

display: inline-block;

font-size: 16px;

transition: all 0.2s linear;

margin: 16px 0 22px;

text-align: center;

cursor: pointer;

}

.garyBtn {

margin-right: 60px!important;

background-color: #e1e1e1;

color: #999999;

}

.blueBtn {

background-color: #1968b1;

color: #fff;

}

.blueBtn:hover {

background: #0e73d0;

}

总结

以上所述是小编给大家介绍的jQuery实现滑动星星评分效果(每日分享)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！