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