4.7 練習
練習1:搜尋框 :focus 狀態的轉場效果
指定檔名:search_transition.html
說明:
放大鏡 icon 定位在搜尋框的恰當位置(如圖)。
點擊 focus 狀態的時候,寬度變成 100%,需設定 transition
結果示意:
提供 html:
<input type="text" class="search" placeholder="搜尋..">
搜尋 icon 的圖片路徑:
https://alldata.sgp1.digitaloceanspaces.com/images/searchicon.png
參考作法:
練習2:圖片編排 - 文字蓋在圖片上方及滑動
指定檔名:text_cover.html
說明:
整個區塊是一個連結,點擊開新分頁。(連到任意網址皆可)
「美麗的風景」文字顏色 #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();
});
});
參考作法: