整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          在的移動端頁面中,很多網(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的功能,但是用起來不是那么便捷,于是想著把這個功能做成一個組件,使用的時候直接引入,不用再寫那么多冗余代碼了。

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

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

          實現(xiàn)分析


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

          js實現(xiàn)div可拖動

          js組件的基本寫法

          在這里主要分析下怎么限制拖動的范圍,先看下圖:


          限制范圍


          拖動時有四種邊緣情況,即圖中的1、2、3、4,我們一一來看

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

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


          有范圍的拖動

          下面貼上實現(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] 元素外部:

          實現(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)檢測的支持。


          主站蜘蛛池模板: 毛片无码一区二区三区a片视频| 精品国产一区二区三区麻豆 | 中文字幕AV一区二区三区 | 亚洲一区欧洲一区| 中文字幕在线精品视频入口一区| 伊人久久一区二区三区无码| 久久99精品一区二区三区| 亚洲国产精品一区二区九九| 国产一区二区三区小说| 日本伊人精品一区二区三区| 免费视频一区二区| 红桃AV一区二区三区在线无码AV| 国产成人精品一区二三区在线观看 | 亚拍精品一区二区三区| 亚洲欧洲一区二区| 亚洲视频在线观看一区| 国精品无码一区二区三区在线| 久久久国产一区二区三区| 精品无码中出一区二区| 国产成人一区二区动漫精品 | 免费一区二区无码东京热| 国产在线精品一区免费香蕉| 国产午夜三级一区二区三| 中文字幕亚洲一区二区三区| 国模无码人体一区二区| 成人精品一区二区三区不卡免费看| 久久国产精品一区| 亚洲啪啪综合AV一区| 日韩视频一区二区三区| 乱码精品一区二区三区| 无码人妻精品一区二区三区蜜桃| 国产精品一区在线麻豆| 国内精品视频一区二区八戒| 日本高清无卡码一区二区久久| 一区二区高清在线| 日本一区二区不卡视频| 精品亚洲AV无码一区二区三区| 毛片一区二区三区无码| 国产精品亚洲综合一区| 无码囯产精品一区二区免费| 国产精品一区视频|