首先非常感谢网友洛克哈特的无私分享,此作品是一款非常实用的星级评分Jquery特效,也是他分享到JquerySchool网站上的第一款作品,简单不复杂,只用了Jquery的一些基础功能就实现了,非常适合网友们学习哦,大家好好去看一下吧。
核心代码如下:
$(function(){
var flag = 1;
$('.star_ul a').hover(function(){
flag = 1;
$('.star_ul a').removeClass('active-star');
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
},function(){
if( flag == 1){
$(this).removeClass('active-star');
$('.s_result').css('color','#333').html('请打分')
}
});
$('.star_ul a').click(function(){
flag = 2;
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
});
$('.square_ul a').hover(function(){
flag = 3;
$('.square_ul a').removeClass('active-square');
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title'))
},function(){
if(flag == 3){
$(this).removeClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#333').html('请打分')
}
});
$('.square_ul a').click(function(){
flag = 4;
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title')) });
})
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友洛克哈特 星级评分 实用特效 滑动插件