撸一个动画

  1 var animateShow = {
  2     _initData:false, //判断动画是否执行完
  3     init: function() {
  4         var t = this;
  5         t._getData();
  6 
  7         if ( !t._initData ) {
  8             var interval;
  9             interval = setInterval(function(){
 10                 $(‘.previous‘).click();
 11             },10000);
 12         }
 13     },
 14     _getData: function() {
 15         var t = this;
 16         $.getJSON(‘http://www.woxiu.com/index.php?action=Index/Home&do=ApiPhotoWall&callback=?‘,function(response){
 17              var template = ‘‘, data = response.data;
 18 
 19             for(var i = 0; i < 5; i++) {
 20             template += ‘<li><i class="cover">&nbsp;</i>‘ +
 21                 ‘<a title="‘ + data[i].name + ‘" href = "‘ + data[i].room_id +‘" target="_blank">‘ +
 22                     ‘<img alt = "‘ + data[i].name + ‘" src =" ‘ + (data[i].index_img || ‘http://x1.xiuimg.com/style/xiu/woxiu/v1/img/no_live01.jpg‘) + ‘"alt="‘ + data.name +‘"/>‘ +
 23                     ‘<p class="tab_name"><span>&nbsp;</span><em>‘ + data[i].name + ‘</em></p>‘+
 24                 ‘</a></li>‘;
 25             }
 26             $(‘#largerImages‘).append(template);
 27             t._largerImages();
 28         });
 29     },
 30     //初始化定位：
 31     _largerImages: function() {
 32         var t = this;
 33         var grids = $(‘#largerImages‘).find(‘li‘), gridsSizeWidth = 213, gridsSizeHeight = 284; //所有图片以此来按比例定义宽高
 34 
 35         t._leftSpacing = ‘‘, //每张图片左边距离相差多少
 36         t._topSpacing = 20,//每张图片顶部距离相差多少
 37         t._rowSpacing = 66, //每张图片宽度相差多少
 38         t._colSpacing = 88, //每张图片高度相差多少
 39 
 40         t._leftArr = [], //所有图片的left值
 41         t._topArr = [], //所有图片的top值
 42         t._zIndexArr = [], //所有图片的zindex值
 43         t._liWidth = [],  //所有图片的宽度
 44         t._liHeight = []; //所有图片的高度
 45 
 46         //初始化定位
 47         grids.each(function(i, img) {
 48             //先左右定位
 49             if ( i < 3) {
 50                 t._leftSpacing = i * t._rowSpacing * 2;
 51             } else if (i > 2) {
 52                 t._leftSpacing = i * t._rowSpacing * 2.3;
 53             };
 54             grids.eq(i).css({left: t._leftSpacing});
 55 
 56             //再判断上下定位以及定宽高
 57             if (i == 0 || i == grids.length - 1) {
 58                 grids.eq(i).css({zIndex: 0,top:t._topSpacing * 6, height:gridsSizeHeight, width:gridsSizeWidth});
 59             } else if ( i == 1 || i == grids.length - 2) {
 60                 grids.eq(i).css({zIndex: 2,top:t._topSpacing * 4, height:gridsSizeHeight + t._colSpacing, width:gridsSizeWidth + t._rowSpacing});
 61             } else if (i == 2) {
 62                 grids.eq(i).css({zIndex:3,top:t._topSpacing, height:gridsSizeHeight + t._colSpacing * 2, width:gridsSizeWidth + t._rowSpacing * 2});
 63                 grids.eq(i).find(‘i‘).removeClass(‘cover‘);
 64             };
 65 
 66             //把各属性值传到数组里面
 67             t._leftArr.push(grids.eq(i).position().left);
 68             t._topArr.push(grids.eq(i).position().top);
 69             t._liWidth.push(grids.eq(i).width());
 70             t._liHeight.push(grids.eq(i).height());
 71             t._zIndexArr.push(grids.eq(i).css(‘z-index‘));
 72         });
 73         
 74         t._reposition();
 75         t._mouseEnter(grids) //鼠标移动上去显示主播昵称
 76     },
 77     //翻页动画
 78     _reposition: function() {
 79         var t = this;
 80         //向前翻页
 81     $(‘.previous‘).bind(‘click‘,function() {
 82         if ( !t._initData && t._leftArr.length != 0) {
 83 
 84             t._initData = true;
 85 
 86             //重新获取选择器
 87             var grids = $(‘#largerImages‘).find(‘li‘); 
 88             
 89             for (var i = 1; i < grids.length; i ++) {
 90                 grids.eq(i).animate({
 91                     zIndex: t._zIndexArr[i - 1],
 92                     left: t._leftArr[i - 1],
 93                      top: t._topArr[i - 1], 
 94                      width: t._liWidth[i - 1], 
 95                      height: t._liHeight[i - 1],
 96                      },1000,
 97                     function() {
 98                         t._initData = false;
 99                     });
100             };
101             grids.eq(0).animate({
102                 left: t._leftArr[4], 
103                 top: t._topArr[4], 
104                 width: t._liWidth[4], 
105                 height: t._liHeight[4],
106                 zIndex: t._zIndexArr[4]
107             },1000,function(){$(this).appendTo(‘#largerImages‘);});
108 
109             grids.find(‘i‘).addClass(‘cover‘);
110             grids.eq(3).find(‘i‘).removeClass(‘cover‘);
111         }
112     });
113     //向后翻页
114     $(‘.next‘).bind(‘click‘,function() {
115         if ( !t._initData && t._leftArr.length != 0) {
116 
117             t._initData = true;
118 
119             //重新获取选择器
120             var grids = $(‘#largerImages‘).find(‘li‘); 
121             
122             for (var i = 0; i < grids.length - 1; i ++) {
123                 grids.eq(i).animate({
124                     left: t._leftArr[i + 1],
125                      top: t._topArr[i + 1], 
126                      width: t._liWidth[i + 1], 
127                      height: t._liHeight[i + 1],
128                      zIndex: t._zIndexArr[i + 1]},1000,
129                     function() {
130                         t._initData = false;
131                     });
132             };
133             grids.eq(4).animate({
134                 left: t._leftArr[0], 
135                 top: t._topArr[0], 
136                 width: t._liWidth[0], 
137                 height: t._liHeight[0],
138                 zIndex: t._zIndexArr[0]
139             },1000,function(){$(this).prependTo(‘#largerImages‘);});
140 
141             grids.find(‘i‘).addClass(‘cover‘);
142             grids.eq(3).find(‘i‘).removeClass(‘cover‘);
143         }
144     });
145     },
146     //鼠标进入图片效果
147     _mouseEnter: function(grids) {
148         grids.each(function(i){
149             $(this).mouseenter(function() {
150                 $(this).find(‘.tab_name‘).animate({
151                     bottom:0,opacity: ‘show‘
152                 },500);
153             });
154             $(this).mouseleave(function() {
155                 $(this).find(‘.tab_name‘).animate({
156                     bottom:-50,opacity: ‘hide‘
157                 },500);
158             });
159         });
160     },
161 };
162 
163 animateShow.init();