week17.md

HOME

---

---

W3Schools How To

這周基本在介紹排版功能和一些按鈕特效及選單，特殊功能在下方介紹

• 可以使用font-awesome第4版，裡面有很多圖示，可以美化畫面

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> //引用CSS

<a href="#"><i class="fa fa-search"></i></a> //利用class呼叫圖示

<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading //fa-spin可以讓這個圖片會轉動
</button>

• 搜索功能，利用input配合onkeyup(當按鍵起來時觸發)，執行搜索指定範圍內class的文字有沒有符合輸入的字

//type="指定輸入類型" placeholder="預先顯示文字" title="鼠標移上去顯示文字"
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>

<script>
function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch"); //抓到輸入的位置(id="mySearch")
  filter = input.value.toUpperCase(); //把輸入全變大寫
  ul = document.getElementById("myMenu"); //取要找的範圍
  li = ul.getElementsByTagName("li"); //取要字
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];//取li裡面的a(第一個)
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { //當輸入文字(轉成大寫) = a裡面的文字(轉成大寫)，display不變(block)
      li[i].style.display = "";
    } else {
      li[i].style.display = "none"; //當輸入文字(轉成大寫) != a裡面的文字(轉成大寫)，不顯示

    }
  }
}
</script>

• 可以增加和去除id裡面的屬性利用classList.add可以新增class到那id上的區域，classList.remove可以移掉

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

window.onscroll = function() {myFunction()}; //當滑鼠滾輪下滑處發函式

var navbar = document.getElementById("navbar");

function myFunction() {//offsetTop是函數的最上面
  if (window.pageYOffset >= navbar.offsetTop;) {//螢幕位置 >= navbar最上面
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

• 用CSS讓圖片震動!

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {//從0%到100%平均分配時間(0.5s/10)
  0% { transform: translate(1px, 1px) rotate(0deg); }//translate位移程度
  10% { transform: translate(-1px, -2px) rotate(-1deg); }//rotate旋轉幅度
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

• 補充: CSS動畫 參考網址

@keyframes ??? { ... }//???代表動畫名稱，要填到name裡面，其實也可以像上面一樣，直接指定名字和速度
//CSS動畫就是@keyframes搭配animation
animation-name	//動畫名稱
animation-duration:	//動畫持續時間，預設 0，單位 s 或 ms。
animation-delay: //動畫延遲播放時間，預設 0，單位 s 或 ms。
animation-iteration-coun: //動畫播放次數，預設 1。其他還有 infinite(循環)。
animation-timing-function: //動畫加速度函式，預設 ease。其他還有： linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubicbezier(n,n,n,n)。
animation-direction: //動畫播放方向，預設 normal。其他還有 reverse、alternate、alternate-reverse。
animation-fill-mode: //動畫播放前後模式，預設 none。其他還有 forwards、backwards、both。
animation-play-state: //動畫播放或暫停狀態，預設 running。其他還有 paused。

• CSS Units (relative)

em //相對於兩倍目前字體的大小
vw //相對寬度的百分之幾，很像%
vh //相對高度的百分之幾，很像%
%  //我覺得這個最常用，直接看區塊比例進行大小分配

offsetWidth指的是HTML元素不包含margin的width
offsetHeight指的是HTML元素不包含margin的heigh

• 好用小功能!

transition: width .5s; 可以讓畫面慢慢從左出來(0.5秒)，可以指定是width還是padding或margin都可以 overflow: hidden; 可以讓區域裡面的內容不會超過區域，可以指定x或y(overflow-x: hidden;) marginLeft:50px可以善用margin讓HTML元素移到適合位置 border-bottom: 3px solid red; 可以給元素加上底線 opacity: 0.6; 可以調透明度，增加層次感 background-image: url("??.png"); 可以把區域內的背景放置那張圖 position: static 可以無視flaot，stiky則是無視float加上fixed border-radius: 50%; 可以使用圓形外框 filter: grayscale(%) 黑白程度100%為純黑白 filter: blur(px) 0為原始圖案，數字越高越模糊 .class1 :hover 可以在鼠標移上去時觸發 transform: scaleX(-1) 可以翻轉圖片