MixItUp 一款jQuery无刷新排序插件

MixItUp 一款jQuery无刷新排序插件
 点击预览  点击下载

 MixItUp jQuery无刷新排序插件是一款鼠标滑过图片显示描述的jQuery过滤排序插件。具有滑动特效,鼠标滑过显示标题描述,点击按钮进行过滤排序,非常漂亮的一款插件。

  1. <script type="text/javascript" src="js/jquery.min.js"></script> 
  2. <script type="text/javascript" src="js/jquery.easing.min.js"></script>   
  3. <script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
  1. $(function () { 
  2.          
  3.         var filterList = { 
  4.          
  5.             init: function () { 
  6.              
  7.                 // MixItUp plugin 
  8.                 $('#portfoliolist').mixitup({ 
  9.                     targetSelector: '.portfolio'
  10.                     filterSelector: '.filter'
  11.                     effects: ['fade'], 
  12.                     easing: 'snap'
  13.                     // call the hover effect 
  14.                     onMixEnd: filterList.hoverEffect() 
  15.                 });              
  16.              
  17.             }, 
  18.              
  19.             hoverEffect: function () { 
  20.              
  21.                 // Simple parallax effect 
  22.                 $('#portfoliolist .portfolio').hover( 
  23.                     function () { 
  24.                         $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad'); 
  25.                         $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');              
  26.                     }, 
  27.                     function () { 
  28.                         $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad'); 
  29.                         $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                                
  30.                     }        
  31.                 );               
  32.              
  33.             } 
  34.  
  35.         }; 
  36.          
  37.         // Run the show! 
  38.         filterList.init(); 
  39.          
  40.          
  41.     });  

转载请注明:代码家园 » MixItUp 一款jQuery无刷新排序插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)