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

2015/03/14 40777

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(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);
 
    });
})