用jquery实现鼠标滑动星级评分特效
此作品是一款非常实用的星级评分Jquery特效,虽然简单但是很实用,只用了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')) });
})
核心代码如下:
$(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')) });
})
【用jquery实现鼠标滑动星级评分特效】相关文章
9. css3鼠标滑过动画
本文来源:https://www.51html5.com/a1190.html
﹝用jquery实现鼠标滑动星级评分特效﹞相关内容
- Jquery实现超炫的弹出层特效
- Jquery实现添加3D特效到你的幻灯片
- 分享Jquery实现网格手风琴特效
- 7款基于jquery实现web前端的源码特效
- 分享Jquery实现网格手风琴特效
- Jquery实现添加3D特效到你的幻灯片
- jQuery插件——jRating评分插件源码分析
- 30款css3实现的鼠标经过图片显示描述特效
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层