在的移動端頁面中，很多網(wǎng)站都用到了側(cè)邊切換菜單欄功能，針對于該功能， 利用CSS3的知識，寫了一個實現(xiàn)側(cè)滑的效果。

效果展示如下：

HTML:首先寫好側(cè)邊的布局。然后不是側(cè)邊的內(nèi)容塊最好用一個內(nèi)容塊包圍住。

CSS樣式

給側(cè)邊菜單定位，起始位置為left:-50%,當(dāng)點擊菜單的展開按鈕，側(cè)邊菜單就加上open類目，讓left:值為0，即展開切換。同理。main也一樣。

JQ代碼

當(dāng)點擊菜單展開按鈕 定義類名為 f-lei，側(cè)邊菜單切換添加刪除類open, 主內(nèi)容切換添加刪除類show。當(dāng)側(cè)邊展開時，點擊展開的剩余背景能收縮展開的菜單欄。

文介紹如何使用和HTML5 Canvas元素來移動、調(diào)整大小和裁剪圖像，這些技術(shù)適用于圖片編輯器、照片分享等應(yīng)用場景。

一般而言圖像的剪裁會放在服務(wù)端進行，但是圖片傳送會消耗較多的流量。借助HTML5 Canvas繪圖功能，可以在瀏覽器端以比較簡單的方式來實現(xiàn)。

代碼和在線演示地址：http://ikinsoft.com/3ddemo/CanvasImage.html，可以先操作下，有個整體印象，界面截圖如下：

構(gòu)建界面布局和元素

HTML頁面由源圖片、Crop操作按鈕、裁剪矩形框以及圖片容器（含4個角的調(diào)整小方塊）組成，主體代碼如下：

img[class=resize-image] 元素為本服務(wù)器圖片資源，是要進行調(diào)整和裁剪的圖片。注意出于安全策略，不能在瀏覽器中跨域操作圖片，否則會出現(xiàn)類似下面的報錯信息：

button[class=btn-crop] 是SVG矢量圖標(biāo)按鈕。

div[class=overlay] 元素是裁剪矩形框。

此外圖片容器使用JavaScript動態(tài)包裝在 img[class=resize-image] 元素外部：

實現(xiàn)大小調(diào)整的功能

大小調(diào)整通過先在Canvas上繪制一個對應(yīng)大小的圖像，接著通過Canvas的toDataURL方法轉(zhuǎn)化為base64編碼的字符串形式的圖片數(shù)據(jù)。最后把該data:URL通過設(shè)置為img的src屬性，附著到目標(biāo)圖像元素上。

實現(xiàn)移動功能

通過mouseup事件獲取新的位置，然后通過的offset方法來完成元素偏移。

實現(xiàn)裁剪功能

這個主要是實現(xiàn)一個居中的覆蓋矩形（overlay），接著通過計算背景圖片和該覆蓋矩形的偏移來獲取圖片裁剪區(qū)域的坐標(biāo)，

然后再通過Canvas的drawImage和toDataURL完成裁剪圖的繪制。

最后再加上一些移動功能，如觸摸事件（Touch）和手勢（Gesture）檢測的支持。