了點(diǎn)時(shí)間寫的，蠻長(zhǎng)時(shí)間了。個(gè)人很喜歡，一段很簡(jiǎn)單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因?yàn)榇a文字呈現(xiàn)沒(méi)有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。

到底多簡(jiǎn)單，先來(lái)看代碼

基于jQuery

基于jQuery

拖拽實(shí)例圖：

拖拽實(shí)例圖

將代碼剝離，只要寫5行就可以實(shí)現(xiàn)拖拽了，是不是很簡(jiǎn)單：

調(diào)用方式

放大、縮小

我們給拖拽增加點(diǎn)功能，支持放大、縮小，先看實(shí)例圖:

放大、縮小

將代碼剝離，原先的代碼保留不變，增加一個(gè)綁定事件：

放大、縮小

這樣來(lái)實(shí)現(xiàn)放大、縮小、拖拽是不是很簡(jiǎn)單，還能實(shí)現(xiàn)很多其他效果，大家慢慢領(lǐng)悟。

原理分析：

放大、縮小、拖拽都離不開(kāi)在網(wǎng)頁(yè)上拖動(dòng)鼠標(biāo)，對(duì)于前端來(lái)說(shuō)就是 document 的 mousemove，當(dāng)鼠標(biāo)在網(wǎng)頁(yè)上移動(dòng)的時(shí)候，無(wú)時(shí)無(wú)刻不在觸發(fā) mousemove 事件，當(dāng)鼠標(biāo)觸發(fā)事件時(shí)，什么時(shí)候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個(gè)對(duì)象來(lái)判定是否進(jìn)行操作：

• move：是否執(zhí)行觸發(fā)操作

• move_target：操作的元素對(duì)象

• move_target.posix：操作對(duì)象的坐標(biāo)

• call_down：mousemove的時(shí)候的回調(diào)函數(shù)，傳回來(lái)的this指向document

• call_up：當(dāng)鼠標(biāo)彈起的時(shí)候執(zhí)行的回調(diào)函數(shù)，傳回來(lái)的this指向document

小提示：

• 簡(jiǎn)單的操作，只需要設(shè)定 move_target 對(duì)象，設(shè)置 move_target 的時(shí)候不要忘記了 move_target.posix 哦；

• 復(fù)雜的操作可以通過(guò)call_down、call_up進(jìn)行回調(diào)操作，這個(gè)時(shí)候是可以不用設(shè)置 move_target 對(duì)象的

深入研究

拖拽和放大、縮小實(shí)現(xiàn)了，但是有個(gè)問(wèn)題，當(dāng)我們鼠標(biāo)點(diǎn)擊并滑動(dòng)的時(shí)候，是會(huì)選中文本的，為了避免這個(gè)問(wèn)題，大家可以自行百度

css 阻止文本選中

css 阻止文本選中

網(wǎng)頁(yè)的放大、縮小、拖拽事件就研究到這里了，小編不再對(duì)如何拓展進(jìn)行深入講解，一切靠大家自行研究，權(quán)當(dāng)課后作業(yè)了。～～

源碼鏈接地址：

http://orzcss.com/posts/d554a392/

本文內(nèi)容均屬個(gè)人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。

加關(guān)注，定時(shí)推送，互動(dòng)精彩多，若你有更好的見(jiàn)解，歡迎留言探討！

SS3實(shí)現(xiàn)可展開(kāi)收縮的彈性動(dòng)畫菜單，可以用在pc端和移動(dòng)端頁(yè)面。喜歡的朋友可以進(jìn)來(lái)看看！

效果圖：

未點(diǎn)擊菜單前

點(diǎn)擊菜單標(biāo)識(shí)后

點(diǎn)擊“菜單”圖標(biāo)后，導(dǎo)航文字會(huì)逐步顯示出來(lái)，然后菜單的標(biāo)識(shí)也會(huì)變回為交叉圖形

代碼展示：

html:

css: