首页>>Jquery图片>>一个简单的响应组合页面过滤和悬停效果(2013-11-22)

一个简单的响应组合页面过滤和悬停效果

一个简单的响应组合页面过滤和悬停效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <div class="container">  
  2.   
  3.         <ul id="filters" class="clearfix">  
  4.             <li><span class="filter active" data-filter="app card icon logo web">All</span></li>  
  5.             <li><span class="filter" data-filter="app">App</span></li>  
  6.             <li><span class="filter" data-filter="card">Card</span></li>  
  7.             <li><span class="filter" data-filter="logo">Logo</span></li>  
  8.             <li><span class="filter" data-filter="web">Web</span></li>  
  9.         </ul>  
  10.   
  11.         <div id="portfoliolist">  
  12.               
  13.             <div class="portfolio logo" data-cat="logo">  
  14.                 <div class="portfolio-wrapper">               
  15.                     <img src="img/portfolios/logo/1.jpg" alt="" width="150" />  
  16.                     <div class="label">  
  17.                         <div class="label-text">  
  18.                             <a class="text-title">Bird Document</a>  
  19.                             <span class="text-category">Logo</span>  
  20.                         </div>  
  21.                         <div class="label-bg"></div>  
  22.                     </div>  
  23.                 </div>  
  24.             </div>                
  25.   
  26.             <div class="portfolio app" data-cat="app">  
  27.                 <div class="portfolio-wrapper">           
  28.                     <img src="img/portfolios/app/1.jpg" alt="" width="150" />  
  29.                     <div class="label">  
  30.                         <div class="label-text">  
  31.                             <a class="text-title">Visual Infography</a>  
  32.                             <span class="text-category">APP</span>  
  33.                         </div>  
  34.                         <div class="label-bg"></div>  
  35.                     </div>  
  36.                 </div>  
  37.             </div>        
  38.               
  39.             <div class="portfolio web" data-cat="web">  
  40.                 <div class="portfolio-wrapper">                       
  41.                     <img src="img/portfolios/web/1.jpg" alt="" width="150" />  
  42.                     <div class="label">  
  43.                         <div class="label-text">  
  44.                             <a class="text-title">Sonor's Design</a>  
  45.                             <span class="text-category">Web design</span>  
  46.                         </div>  
  47.                         <div class="label-bg"></div>  
  48.                     </div>  
  49.                 </div>  
  50.             </div>                
  51.               
  52.             <div class="portfolio card" data-cat="card">  
  53.                 <div class="portfolio-wrapper">           
  54.                     <img src="img/portfolios/card/3.jpg" alt="" width="150" />  
  55.                     <div class="label">  
  56.                         <div class="label-text">  
  57.                             <a class="text-title">Typography Company</a>  
  58.                             <span class="text-category">Business card</span>  
  59.                         </div>  
  60.                         <div class="label-bg"></div>  
  61.                     </div>  
  62.                 </div>  
  63.             </div>    
  64.                           
  65.             <div class="portfolio app" data-cat="app">  
  66.                 <div class="portfolio-wrapper">  
  67.                     <img src="img/portfolios/app/2.jpg" alt="" width="150" />  
  68.                     <div class="label">  
  69.                         <div class="label-text">  
  70.                             <a class="text-title">Weatherette</a>  
  71.                             <span class="text-category">APP</span>  
  72.                         </div>  
  73.                         <div class="label-bg"></div>  
  74.                     </div>  
  75.                 </div>  
  76.             </div>            
  77.               
  78.             <div class="portfolio card" data-cat="card">  
  79.                 <div class="portfolio-wrapper">           
  80.                     <img src="img/portfolios/card/1.jpg" alt="" width="150" />  
  81.                     <div class="label">  
  82.                         <div class="label-text">  
  83.                             <a class="text-title">BMF</a>  
  84.                             <span class="text-category">Business card</span>  
  85.                         </div>  
  86.                         <div class="label-bg"></div>  
  87.                     </div>  
  88.                 </div>  
  89.             </div>    
  90.               
  91.             <div class="portfolio card" data-cat="card">  
  92.                 <div class="portfolio-wrapper">           
  93.                     <img src="img/portfolios/card/2.jpg" alt="" width="150" />  
  94.                     <div class="label">  
  95.                         <div class="label-text">  
  96.                             <a class="text-title">Techlion</a>  
  97.                             <span class="text-category">Business card</span>  
  98.                         </div>  
  99.                         <div class="label-bg"></div>  
  100.                     </div>  
  101.                 </div>  
  102.             </div>    
  103.               
  104.             <div class="portfolio logo" data-cat="logo">  
  105.                 <div class="portfolio-wrapper">           
  106.                     <img src="img/portfolios/logo/2.jpg" alt="" width="150" />  
  107.                     <div class="label">  
  108.                         <div class="label-text">  
  109.                             <a class="text-title">KittyPic</a>  
  110.                             <span class="text-category">Logo</span>  
  111.                         </div>  
  112.                         <div class="label-bg"></div>  
  113.                     </div>  
  114.                 </div>  
  115.             </div>                                                                                                                                                                                                        
  116.     </div><!-- container -->  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_126.html