CSS 與特效

JQ 的特效主要是協助快速控制 CSS，包含控制了你的 display 做顯示或隱藏，或是淡入淡出 opacity 變化等等。另外還有所謂的 animate，幫你做 keyframe 上的 from 到 to 的過渡效果。

接下來講一下邏輯控制、迴圈、函數與物件

邏輯控制

1. (if/eles if/else)

if (number == 5) {
  console.log("number is 5");
} else if (number == 4) {
  console.log("number is 4");
} else if (number == 3) {
  console.log("number is 3");
} else if (number == 2) {
  console.log("number is 2");
} else if (number == 1) {
  console.log("number is 1");
} else {
  console.log("number is not  …

2. switch case

switch (number) {
  case 5:    
    console.log("number is 5 "); 
    break;   
  case 4: 
    console.log("number is 4 "); 
    break;
  case 3: 
    console.log("number is 3 ");
    break;
  case 2: 
    console.log("number is 2 "); 
    break;
  case 1: 
    console.log("number is 1 "); 
    break;
  default:
    console.log("number is not 1 to 5");
}

迴圈控制

1. while

var times = 1;          
while (times < 5) {    
  console.log(times);  
  times++;            
}

2. do while

var times = 1;    
do {                   
  console.log(times);   
  times++;             
} while (times < 5)

3. while-Array

var nums = [1, 3, 5, 7, 9];
var i = 0;
while (i < nums.length) {
  console.log(nums[i]);  // 1, 3, 5, 7, 9
  i++;
}

4. For

function print(value, key) { console.log(value); }
var map = new Map();
map.set('name', 'Arch');
map.set('age', 29);
map.set('job', 'Engineer');
map.forEach(print);  
var map = new Map();
map.set("name", "Arch");
map.set("age", "29");
map.set("job", "engineer");
for (let [key, value] of map) {
  console.log(key + " : " + value);}
//console顯示 "name : Arch", "age : 29", "job : engineer"

接下來介紹一下這幾年的熱門插件

• Tilted page scroll
  往下滑動照片的時候可以有3D的特效
• SVGMagic
  讓你可以在網頁中使用svg向量圖
• Owl Carousel
  最簡單達成圖片輪播的插件
• fullPage
  整頁下滑的插件，建立整頁瀏覽的效果
• multiScroll
  整夜瀏覽 只是滑動效果更炫
• Splitchar
  字體特效
• BootstrapValidator、form validation jQuery plugin
  搭配form建立驗證機制
• prettySocial
  實用! 直接建立社群分享button