Demo | 官網

經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。

Comment

本教程中,我們將看看如何創建一個具有視差動畫效果的jQuery滑塊。在這個例子中,只用幾行代碼就實現了視差滑塊(少於40行和3kb)。jQuery庫中眾所周知和使用最廣泛的函數編寫了這個例子。很容易理解代碼流並根據您的需要進行定制。

在這個例子中,我使用init()函數一個接一個地定位幻燈片。幻燈片縮略圖列在滑塊圖像下方。幻燈片和縮略圖將添加到滑塊容器中。在點擊該縮略圖圖像時,通過改變幻燈片的位置向用戶顯示相應的幻燈片。在更換滑塊位置時,滑塊容器也會以不同的級別和速度來回滑動,從而產生視差效果。

Demo

jquery

Comment

陣列 Array

這篇文章要來介紹容器,首先先來談談陣列,陣列是有順序地存放大量資料的結構,大多數程式語言都是 0 為起始點,例如 arr[0] , JavaScript 也不例外,當然 JavaScript 的陣列也內建很多函式可以直接呼叫例如 length、match...等。

陣列的使用

陣列的初始化有兩種方式一種是立即給值,另一種是後續給值。

  • 立即給值
const arr = [1, 2, 3]
console.log(arr.length) // 3
  • 後續給值
const arr = []
arr[0] = 1
arr[1] = 2
arr[2] = 3
console.log(arr.length) // 3

Comment

Exports & Imports (Modules)

在撰寫 API 過程中你會將很多分支檔案拆開寫,一方面是減少過長的程式碼另一方面是日後好管理。你必須要先匯出分支檔(export)再經由主檔案中被引入(import),以下有個簡單例子,第一個分支檔 person.js 將函式 person 匯出,第二支分支檔將函式 clean 和變數 bastData 匯出 (另一種匯出寫法) ,最後再主檔案 index.js 引入被呼叫使用。

分支檔 person.js、utility.js

// person.js 分支檔1
const person ={
  name:'Andy'
} 

export default person;
// utility.js 分支檔2
export const clean = () => {}
export const bastData = 10;

主檔 index.js

// index.js
//default export
import person from './person.js';
//named export
import {baseData} from './utility.js';
import {clean} from './utility.js';

//named export (rename)
import {clean as c} from './utility.js';
import * as c from './utility.js';

Comment

函式(function)

箭頭函式在 JavaScript 中改寫原本 function 的撰寫方式。除了較短的語法外,它們在保持this 關鍵字範圍方面也有優勢 參見這裡,此外在 ESLint 中官方也建議使用箭頭函式取代傳統寫法。

函式 (function) 又稱方法 (method),用於程式碼過多重複時定義一個方法來去重複呼叫他來解省我們的開發效率,以下為範例:

原本寫法

// 使用有名稱的函式
function sum(a, b){
    return a+b;
}

// 常數指定為匿名函式
const sum = function(a, b) {
    return a+b;
}

Comment

Copyright © 2018 ucamc