倒金字塔3D立体展示点击图片移位排列jquery特效

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

我的jj比我名字长八倍

倒金字塔3D立体展示点击图片移位排列jquery特效

$(function(){
	$('.item').each(function(){
		var size = $('.item').size();
		var index = $('.item').index($(this));
		$(this).css({
			left:index * 160,
			top:50 - Math.abs(index - Math.floor(size/2))*50,
			zIndex:size - Math.abs(index - Math.floor(size/2))
		});
		$(this).attr('index',index);
	});

	$('.item').click(function(){

		var current = $('.item[current]');
		current.stop(true,true);
		$(this).stop(true,true);

		var top = current.css('top');
		var left = current.css('left');
		var index = current.attr('index');

		$('.item[current]').css('zIndex',$(this).css('zIndex')).removeAttr('current');
		current.attr('index',$(this).attr('index'));
		current.animate({top:$(this).css('top'),left:$(this).css('left')},500);


		$(this).css('zIndex',999);
		$(this).attr('current','');
		$(this).animate({top:top,left:left},500);

	});
})