HTML移動(dòng)端側(cè)滑菜單功能

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

效果展示如下：

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

CSS樣式

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

JQ代碼

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

幾天用js實(shí)現(xiàn)了鼠標(biāo)拖動(dòng)div的功能，但是用起來不是那么便捷，于是想著把這個(gè)功能做成一個(gè)組件，使用的時(shí)候直接引入，不用再寫那么多冗余代碼了。

想要實(shí)現(xiàn)的效果

只要把div注冊到該組件，目標(biāo)div就都能隨意拖動(dòng)
可設(shè)置div能夠拖動(dòng)的范圍

實(shí)現(xiàn)分析

js組件的基本寫法和div拖動(dòng)的邏輯就不再贅述了，前面文章已經(jīng)說過了，可點(diǎn)擊下面鏈接查看

js實(shí)現(xiàn)div可拖動(dòng)

js組件的基本寫法

在這里主要分析下怎么限制拖動(dòng)的范圍,先看下圖：

限制范圍

拖動(dòng)時(shí)有四種邊緣情況，即圖中的1、2、3、4，我們一一來看

當(dāng)div拖動(dòng)到位置1時(shí)，我你們再往左拖動(dòng)，都應(yīng)該失效，即拖動(dòng)div的left 始終等于外層div的left值
當(dāng)div拖動(dòng)到位置2時(shí)，我們再往上拖動(dòng)，都應(yīng)該無效，即拖動(dòng)div的top始終等于外層div的top值
當(dāng)div拖動(dòng)到位置3時(shí)，我們再往右拖動(dòng)，都應(yīng)該無效，即拖動(dòng)div的left始終等于外層div的left加上外層div的寬度，然后再減去拖動(dòng)div的寬度
當(dāng)div拖動(dòng)到位置4時(shí)，我們再往下拖動(dòng)，都應(yīng)該無效，即拖動(dòng)div的top始終等于外層div的top加上外層div的高度然后減去拖動(dòng)div的高度

理論知識(shí)弄明白了，我們先看下實(shí)現(xiàn)的效果吧

有范圍的拖動(dòng)

下面貼上實(shí)現(xiàn)的代碼

html中引入組件，并初始化

html中引入組件

具體的js組件實(shí)現(xiàn)

js拖動(dòng)組件1

js拖動(dòng)組件2

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

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

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

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

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

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

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

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

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

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

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