WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-10. 影像排版與互動特效

調整第三、四個section區 CSS 樣式

第三、四個section區:設計頁籤置中並設計頁籤的樣式,留意手機版時的呈現,如何調整才理想?

第三個section區:設計內容區的寬度滿版的Banner影像,思考手機版、桌機版如何呈現才理想?

第三個section區:設計內容區的影像在大螢幕時4欄排版、在小螢幕時2欄排版。

第四個section區:設計內容區的影像依螢幕寬度調整欄數,6欄=>4樓=>3欄=>2欄排版。

設計第四個section區中的影像:滑鼠滑入的影像放大加光暈,而其餘的影像則縮小淡化

CSS樣式設計

.scale_s { transform: scale(0.7); opacity: 0.2; }
.scale_b { transform: scale(1.3); box-shadow: 0 0 10px 3px red; }

JS程式設計

$('#sec4 .col-6 img').hover(
  function(){
    $('#sec4 .col-6 img').not(this).addClass('scale_s');
    $(this).addClass('scale_b');
  },
  function(){
    $('#sec4 .col-6 img').removeClass('scale_s').removeClass('scale_b');
  }
);

 

 

go TOP