4.7 練習

練習1：搜尋框 :focus 狀態的轉場效果

指定檔名：search_transition.html

說明：

• 搜尋框 100px

• 放大鏡 icon 定位在搜尋框的恰當位置(如圖)。

• 點擊 focus 狀態的時候，寬度變成 100%，需設定 transition

結果示意：

提供 html：

<input type="text" class="search" placeholder="搜尋..">

搜尋 icon 的圖片路徑：

https://alldata.sgp1.digitaloceanspaces.com/images/searchicon.png

參考作法：

練習2：圖片編排 - 文字蓋在圖片上方及滑動

指定檔名：text_cover.html

說明：

• 圖片路徑：https://picsum.photos/id/774/500/300
• 整個區塊是一個連結，點擊開新分頁。(連到任意網址皆可)

• 圓角 5px。

• 「美麗的風景」文字顏色 #FFF，背景色 hsla(0, 0%, 0%, .5)，文字大小 .8rem。定位在距離上方 10px、距離左側 0px。

• 「次要說明」文字，樣式同上，但預設看不到，定位在距離左側 0px、距離下方 0px。

• 滑鼠移過連結區塊，「次要說明」文字，往上滑出(transition)：transform .5s。

結果示意：

提供 html：

<a href="http://tw.yahoo.com" target="_blank" class="card">
  <img src="https://picsum.photos/id/774/500/300">
  <span class="hint_text">美麗的風景</span>
  <div class="other_notes">次要說明次要說明次要說明</div>
</a>

參考作法：

練習3：頁面下滑，置頂區域的呈現

指定檔名：fixed_top_nav.html

結果示意：

提供最上方置頂的那塊 html：

<div class="fixed_top">這是置頂的區域</div>

載入 jQuery ：(放在 </body> 結束標籤之前)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

以下程式放在 </body> 結束標籤之前，在上述 jQuery 載入之後：

var header_active = function(){
  
  // 取得使用者滑了多少 px
  var scroll_top = $(window).scrollTop();
  
  // 將 scroll_top 數值放到 p.-pos 內容
  $("p.-pos").html(scroll_top);
  
  
  if(scroll_top >= 100){
    $("div.fixed_top").addClass("-on");
  }else{
    $("div.fixed_top").removeClass("-on");
  }
  
};


$(function(){
  
  // 第三步：偵測頁面滑動時會觸發
  $(window).scroll(function(){
    header_active();
  });
  
});

參考作法：