彙整

Webpack 實作入門1:寫給 「非Node.js開發者」 的教學

作者:

8 月 21, 2017 10:34 上午 | 留言


Webpack 實作入門1:寫給 「非Node.js開發者」 的教學

會寫這篇純粹是想整理一個單純的 Webpack 教學 (給非 Node.js 開發者) 我自己的經驗是這樣的。 一開始想學習 Webpack 時,都會先在網路上找教學,但通常都是後端也使用 Node.js 的人或純前端工程師寫的教學,很容易會談太多範例是基於他們自己的開發流程,所以總是一開始就會提到像是 react, jsx … 等等,範例語法也常常出現 Node.js 的寫法,以至於很難理解單純...

閱讀更多


WordPress AJAX佈景實作 (以jQuery為例)

作者:

6 月 12, 2012 4:55 下午 | 留言


WordPress AJAX佈景實作 (以jQuery為例)

一般使用jQuery實作AJAX的情況 如果你曾經在一般網頁上實作過ajax效果,尤其是使用jQuery (無論是用load(), post()或ajax()…等方式),你一定可以在閱讀本文後很快就理解WP是怎麼處理ajax效果的。 先來看看一個利用AJAX來載入資料的情境:以jQuery實作AJAX為例,我們通常會以送出GET或POST請求的方式,帶上一些參數資料,再丟給一個負責處理的目標網址,...

閱讀更多


jQuery Mu Image Resize 縮圖裁切外掛

作者:

5 月 7, 2012 2:28 下午 | 留言


jQuery Mu Image Resize 縮圖裁切外掛

為網站內的圖片產生縮圖,已經是非常普及的應用了,不過這通常是透過後端程式來處理,動用到的也是Server的資源。不過某些情況下,我們希望在前端將縮圖的問題處理掉,而今天要介紹的jQuery Plugin – Mu Image Resize 就是為此而生的。


網頁設計中的多層視差滾動效果 (Parallax scrolling)

作者:

10 月 19, 2011 1:51 上午 | 3 則迴響


網頁設計中的多層視差滾動效果 (Parallax scrolling)

觀察上面的圖片,裡面有三張圖片,分別放置於不同階層,如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫,但背景圖片動得比較慢,前景圖片動得比較快,我們就可以感受到較符合生活經驗的景深效果。


Google Doodle-Google首頁的javascript動畫初探

作者:

5 月 11, 2011 2:29 下午 | 9 則迴響


Google Doodle-Google首頁的javascript動畫初探

今天早上除了發現自己過了10:42還活著之外,還發現Google首頁的Google Doodle有了新的動畫,今天的主題是瑪莎·葛蘭姆(Martha Graham)117歲誕辰 (不認識XD),不過這種手繪風格的動畫實在太有質感了,因此除了非常好奇的去看作者是哪位仁兄外,也想趁這個機會了解google是如何撰寫這個javascript動畫。


表單提交(submit)時使用preventDefault可能產生的問題

作者:

4 月 12, 2011 2:58 下午 | 1 則迴響


表單提交(submit)時使用preventDefault可能產生的問題

在表單內的任一輸入框按下Enter後,預設情況下表單會自動提交,若使用preventDefault阻止後,表單將從此不能Submit,怎麼辦? 一般我們設計HTML表單後,若在Form內的文字框按下Enter,預設會觸發Submit事件,造成表單提交。但若有某些文字框我們有特別的用途,希望它按下Enter後不要Submit表單,而是去做一些特定的動作,此時我們可以先使用preventDefault...

閱讀更多


淺談 jQuery圖片延遲載入特效 LazyLoad 原理

作者:

3 月 22, 2011 3:03 下午 | 1 則迴響


淺談 jQuery圖片延遲載入特效 LazyLoad 原理

LazyLoad特效,其實已經流行好一陣子了,它是一個jQuery的外掛,可以讓還沒出現在畫面上的網頁元素先別載入,直到使用者捲動捲軸,移到該元素時,它才載入。這對於網站上塞滿圖片的人可是一大福音,因為使用LazyLoad技巧,可以提升網站的載入速度。 Wow,這是怎麼辦到的?


1 2