jQuery電視牆圖片文章展示效果 (滑鼠移動顯示標題摘要)

          DEMO

電視牆效果一直是筆者非常喜歡使用的文章展示方式的其中一直種效果 , 類似電視牆效果的還有所謂的「瀑布流」效果 , 不過瀑布流通常拿來展示大量的圖文主題時才會使用到 , 如果只是單頁顯示個6 ~ 9個圖文主題數的話 , 運用電視牆效果來講筆者最推薦 ! 要實現這種JQ效果其實很簡單 , 只需要套用一樣是 cool carousel 所開發的SLIDER套件即可快速實現 :)

簡易說明

程式碼部分也相當簡潔 , 這裡我稍微簡單說明一下, 下方為每篇圖文的程式碼：

1. <div class="carousel">
   
2.                                 <img src="img/car1.jpg" alt="car1" width="275" height="200" />
   
3.                                 <div>
   
4.                                         <h3>Sbarro TwoFort100</h3>
   
5.                                         <p>The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. </p>
   
6.                                 </div>
   
7.                         </div>

複製代碼

從上方程式碼中可以發現 , 圖片包覆在<div class="carousel">之中 , 標題就是使用H3標籤 (作者挺用心標準化的) , 摘要則是使用<p>標籤 , 字數要稍微注意控制一下 , 別超出就可以 ..

剩下CSS部分 , 就請大家自行研究一下範例檔案囉 , 有CSS基礎的朋友相信就可以很輕鬆地靈活運用囉 :)


coolcarousel_tv wall.zip (213.08 KB, 下載次數: 57)

2013-7-8 20:40 上傳

點擊文件名下載附件
閱讀權限: 10