簡(jiǎn)介：用鼠標(biāo)拖拽彈出窗口是我們每天用到最多的功能之一。本案例以百度網(wǎng)站的登錄窗口為例，講解鼠標(biāo)拖拽效果如何實(shí)現(xiàn)，拖拽范圍限定以及登陸窗口自動(dòng)居中。通過本案例，你將學(xué)會(huì)如何制作彈出窗口特效，了解把元素設(shè)置為可拖拽的原理。
第1章 案例效果展示及原理分析
鼠標(biāo)拖拽效果的展示，并對(duì)這個(gè)效果如何實(shí)現(xiàn)進(jìn)行簡(jiǎn)單的原理分析。
第2章 登錄浮層靜態(tài)頁面實(shí)現(xiàn)
對(duì)鼠標(biāo)拖拽的主體——登錄浮層的相關(guān)布局進(jìn)行實(shí)現(xiàn)。
第3章 遮罩及登錄鏈接布局實(shí)現(xiàn)
點(diǎn)擊“登錄”彈出浮層，同時(shí)出現(xiàn)遮罩，本章告訴你這些如何實(shí)現(xiàn)。
第4章 遮罩全屏及自動(dòng)居中浮層
用JavaScript腳本來實(shí)現(xiàn)登陸浮層的自動(dòng)居中效果。
第5章 三個(gè)關(guān)鍵鼠標(biāo)拖拽事件
本部分主要是對(duì)鼠標(biāo)拖拽效果的實(shí)現(xiàn)，詳細(xì)講解點(diǎn)擊、拖動(dòng)、釋放三個(gè)鼠標(biāo)事件。
第6章 拖動(dòng)范圍限定
登錄浮層不是可以任意拖動(dòng)的，它只能在屏幕的可視窗口范圍內(nèi)活動(dòng)。
第7章 觸發(fā)打開及關(guān)閉登錄浮層
對(duì)登錄浮層的打開及關(guān)閉動(dòng)作進(jìn)行講解，并對(duì)窗口大小改變時(shí)出現(xiàn)的滾動(dòng)條問題進(jìn)行解決。
第8章 課程總結(jié)
對(duì)鼠標(biāo)拖拽特效實(shí)現(xiàn)過程的開發(fā)流程進(jìn)行詳細(xì)梳理，并對(duì)每一步的關(guān)鍵技術(shù)進(jìn)行總結(jié)，尤其是用到的函數(shù)部分。