6.14

最新推荐文章于 2025-05-03 14:27:20 发布

原创最新推荐文章于 2025-05-03 14:27:20 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用 jQuery 实现的鼠标悬停和点击事件处理方法，其中包括了元素样式的动态更改以及分页样式的实现。通过 mouseover、click 和 mouseleave 事件，可以有效地改变元素状态并保持良好的用户体验。

一 mouseover和click执行了同一个事件但mouseleave把事件样式去掉

	$('.bg nav ul li div').click(function(){//nav
		var preli =	$(this).parent('li').prevAll('li');//其他换为蓝色
		var prelilength = $(this).parent('li').prevAll('li').length;
		for(var i=0;i<prelilength;i++){
			preli.eq(i).find('img').attr('src',"img/xp-bluecir.png");
		}
		var nextli =	$(this).parent('li').nextAll('li');
		var nextlilength = $(this).parent('li').nextAll('li').length;
		for(var i=0;i<nextlilength;i++){
			nextli.eq(i).find('img').attr('src',"img/xp-bluecir.png");
		}
		$('[cur]').removeAttr('cur');
		$(this).attr('cur','cur');
		if($(this).find('img').attr('src')!='img/xp-redcircle.png'){
			$(this).find('img').attr('src',"img/xp-redcircle.png");
		}
		
	})
	
	$('.bg nav ul li div').mouseover(function(){
		if($(this).find('img').attr('src')!='img/xp-redcircle.png'){
			$(this).find('img').attr('src',"img/xp-redcircle.png");
		}
	})
	
	$('.bg nav ul li div').mouseleave(function(){
		if(!$(this).attr('cur'))
			$(this).find('img').attr('src',"img/xp-bluecir.png");
	})

二分页样式制作

	$('.count li').click(function(){
		$('.count .clicked').removeClass('clicked');
		$(this).addClass('clicked');
	})
	$('.pre').click(function(){
		var curindex = $('.count .clicked').index();
		if(curindex!=0){
		$('.count .clicked').prev().addClass('clicked');
		$('.count').find('li').eq(curindex).removeClass('clicked');
		}
		
	})
	
	$('.next').click(function(){
		var curindex = $('.count .clicked').index();
		$('.count .clicked').next().addClass('clicked');
		$('.count').find('li').eq(curindex).removeClass('clicked');
		
	})
	
	$('.count li,.pre,.next').mouseover(function(){
		$(this).css('background','#dfdfdf')
	})
	$('.count li,.pre,.next').mouseleave(function(){
		$(this).css('background','#ecedef')
	})