jQuery鼠标点击展开图片详情文字介绍代码

jQuery鼠标点击展开图片详情文字介绍代码，图片缩略图排列，鼠标悬停图片遮罩显示标题，点击展开显示详细文字说明js网页特效。

分类：图片代码 > 图片插件难易：初级

查看演示下载资源下载积分： 20 积分

js代码

<script type="text/javascript">
$(document).ready(function() {

	//------------------------------------------鼠标点击图片	
	$('#aaa').children('li').click(function(){
	
		wz=$(this).css('left');
		dq=$(this).index();
	
		$(this).siblings(dq).fadeOut();
		$(this).animate({left:'0px'},1000)	;
	
		$(this).children('img').animate({opacity:'1'});
		$(this).children('.aaays').css('display','none');
		$('#dang').css('z-index','999');
	
		//------------------------------------------鼠标划出全部的时候	
		$('#name').children('div').eq(dq).animate({top:'0px'},1000);
	});
	
	$('#nav').hover(function(){	},function(){
		$('#nav').find('li').fadeIn();
		$('#nav').find('li').eq(dq).animate({left:wz},1000);
		$('#name').children('div').eq(dq).animate({top:'-500px'});
		$('#dang').css('z-index','0');
	})

	//------------------------------------------鼠标滑过透明

	$('#aaa').children('li').hover(function(){
		$(this).children('img').animate({opacity:'0.5'},500);
		$(this).children('.aaays').css('display','block');
	},function(){
		$(this).children('img').animate({opacity:'1'});
		$(this).children('.aaays').css('display','none');
	});

});
</script>