搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 jQuery電視牆圖片文章展示效果 (滑鼠移動顯示標題摘要) ...
byadmin 發表於 2013-7-8 20:41:17 , 6698人已閱讀 , 0人回應
電視牆效果.jpg



電視牆效果一直是筆者非常喜歡使用的文章展示方式的其中一直種效果 , 類似電視牆效果的還有所謂的「瀑布流」效果 , 不過瀑布流通常拿來展示大量的圖文主題時才會使用到 , 如果只是單頁顯示個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)

收藏回覆 只看該作者 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:sr.design2011@gmail.com

, Processed in 0.047849 second(s), 42 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2024-11-23 16:22

回頂部