在的移動端頁面中,很多網(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è)邊展開時,點擊展開的剩余背景能收縮展開的菜單欄。
幾天用js實現(xiàn)了鼠標(biāo)拖動div的功能,但是用起來不是那么便捷,于是想著把這個功能做成一個組件,使用的時候直接引入,不用再寫那么多冗余代碼了。
js組件的基本寫法和div拖動的邏輯就不再贅述了,前面文章已經(jīng)說過了,可點擊下面鏈接查看
js實現(xiàn)div可拖動
js組件的基本寫法
在這里主要分析下怎么限制拖動的范圍,先看下圖:
限制范圍
拖動時有四種邊緣情況,即圖中的1、2、3、4,我們一一來看
理論知識弄明白了,我們先看下實現(xiàn)的效果吧
有范圍的拖動
html中引入組件,并初始化
html中引入組件
具體的js組件實現(xiàn)
js拖動組件1
js拖動組件2
文介紹如何使用和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] 元素外部:
大小調(diào)整通過先在Canvas上繪制一個對應(yīng)大小的圖像,接著通過Canvas的toDataURL方法轉(zhuǎn)化為base64編碼的字符串形式的圖片數(shù)據(jù)。最后把該data:URL通過設(shè)置為img的src屬性,附著到目標(biāo)圖像元素上。
通過mouseup事件獲取新的位置,然后通過的offset方法來完成元素偏移。
這個主要是實現(xiàn)一個居中的覆蓋矩形(overlay),接著通過計算背景圖片和該覆蓋矩形的偏移來獲取圖片裁剪區(qū)域的坐標(biāo),
然后再通過Canvas的drawImage和toDataURL完成裁剪圖的繪制。
最后再加上一些移動功能,如觸摸事件(Touch)和手勢(Gesture)檢測的支持。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。