jQuery图片翻转特效代码

相关js代码
$(document).ready(function() {
  
  //Initiliaze
  itemShow         = 8;
  indexedItemShow  = itemShow - 1
  itemList         = $('#portfolio-item');
  itemWrapper      = $('#portfolio');
  rotation         = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right'];
  navigation       = $('#navigation a');

  //Populate items
  for( var i = 0; i < itemShow; i++ ) {
  
    itemImage    = itemList.children('li:eq(' + i + ')').children('img');
    itemSrc      = itemImage.attr('src');
    itemAlt      = itemImage.attr('alt');
    item         = '<div style="background:url(' + itemSrc + ')"> <span>' + itemAlt + '</span></div>';
    itemWrapper.append(item);
  }
  
  
  navigation.on('click', function(e) {
    
    e.preventDefault();

    navigation.removeClass('selected');
    $(this).addClass('selected');
    
    page = $(this).attr('data-page');

    for( var i = 0; i <= indexedItemShow; i++ ) {

      random     = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
      animation  = rotation[random];
      
      item       = itemWrapper.children('div:eq(' + i + ')');

      item.addClass('animated ' + animation);

      window.setTimeout(function (index) {
        return function () {

          indexReal    = (page == 1) ? index : (index + (page - 1)) ;
          itemHost     = indexReal + (indexedItemShow * (page - 1));

          itemImage    = itemList.children('li:eq(' + itemHost + ')').children('img');
          itemSrc      = itemImage.attr('src');
          itemAlt      = itemImage.attr('alt');
          itemCurrent  = itemWrapper.children('div:eq(' + index + ')');

            itemCurrent.css('background', 'url(' + itemSrc + ')');
            itemCurrent.children('span').text(itemAlt);
        };
      } (i), 500);
      
      item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
        $(this).removeClass();
      });
    }
  });
});