热门关键字:
jquery > jquery插件 > js特效 > 网友洛克哈特分享jquery实现鼠标滑动星级评分特效

网友洛克哈特分享jquery实现鼠标滑动星级评分特效

10151
所属分类:js特效
发布时间:2013/5/28 20:00:25
下载量:2193
评论数:5
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=235

首先非常感谢网友洛克哈特的无私分享,此作品是一款非常实用的星级评分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'))	});
})

效果如下:

网友洛克哈特分享jquery实现鼠标滑动星级评分特效






如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:网友洛克哈特 星级评分 实用特效 滑动插件
  • 网友洛克哈特分享jquery实现鼠标滑动星级评分特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友洛克哈特分享jquery实现鼠标滑动星级评分特效
  • 网友洛克哈特分享jquery实现鼠标滑动星级评分特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐