用 Chart.js 來做資料視覺化
Chart.jsChart.js 是款好用的圖表 JavaScript library,支援折線圖(line)、長條圖(bar)、雷達圖(radar)、圓餅圖(pie & doughnut)、圓面積圖(polarArea)、氣泡圖(bubble)、分布圖(scatter),也夠將圖表混合在一 ...
jvectormap 地圖套件
Jvectormap基於 jQuery 的地圖套件,地圖由 SVG 生成。
引用link rel="stylesheet" href="css/jquery-jvectormap-2.0.5.css">
<script src="js/j ...
Parallax Scrolling 視差滾動
Parallax Scrolling 視差滾動原理是把背景圖片的移動速度放慢,讓前景圖片移動較快。利用多層背景以不同的速度移動,造成視覺上立體的感受。
特點有
較適合單頁面或資訊較少的網站
使用者只需簡單滾動滑鼠
提高使用者體驗
有幾種方式可以實作:
JavaScript需要計算每個元素的移動位 ...
延遲載入圖片 lazy loading
Lazy loadingLazy loading(延遲載入)是很實用的開發技巧。在圖片很多的網站使用之後,可以提升頁面載入速度,還能節省網路的流量。
大致上的作法是:
一開始圖片不完全載入(src內先不放圖片路徑)
觀察圖片是否進入視窗範圍
視窗改變後,載入圖片(src內放入圖片路徑)
目前 ...
JavaScript 操作 DOM 及事件傳遞
Window 及 Documentwindow 是指瀏覽器視窗(最上層的全域物件),包含了 DOM。支援分頁的瀏覽器中,每一個分頁標籤都擁有自己的 window 物件。其本身有許多屬性跟方法。例如:
// 跳出提示視窗
window.alert('Hello world')
// ...
Node.js 實作分頁
Node.js 實作分頁一樣延續 使用 Node.js 與 RESTful API 架構來串接 mongoDB 並部署到 Heroku,跟 Node.js 實作登入及驗證 來延伸實作分頁功能。
製作分頁功能,首先要考慮四個要素:
總頁數 = 總資料量/每頁每頁資料量
目前頁數 = 預設第一頁(之後 ...