滑鼠拖拽效果

課程簡介

用滑鼠拖拽彈出視窗是我們每天用到最多的功能之一。本案例以百度網站的登錄視窗為例，講解滑鼠拖拽效果如何實現，拖拽範圍限定以及登入視窗自動居中。通過本案例，你將學會如何製作彈出視窗特效，了解把元素設定為可拖拽的原理。

第1章案例效果展示及原理分析

滑鼠拖拽效果的展示，並對這個效果如何實現進行簡單的原理分析。

1-1效果展示及原理分析(02:03)

第2章登錄浮層靜態頁面實現

對滑鼠拖拽的主體——登錄浮層的相關布局進行實現。

2-1登錄浮層靜態頁面實現(07:49)

2-2練習題

2-3實戰題

第3章遮罩及登錄連結布局實現

點擊“登錄”彈出浮層，同時出現遮罩，本章告訴你這些如何實現。

3-1遮罩及登錄連結布局實現(02:15)

3-2練習題

3-3實戰題

第4章遮罩全螢幕及自動居中浮層

用JavaScript腳本來實現登入浮層的自動居中效果。

4-1遮罩全螢幕及自動居中浮層(04:52)

4-2練習題

4-3實戰題

第5章三個關鍵滑鼠拖拽事件

本部分主要是對滑鼠拖拽效果的實現，詳細講解點擊、拖動、釋放三個滑鼠事件。

5-1三個關鍵滑鼠拖拽事件(06:27)

5-2練習題

5-3實戰題

第6章拖動範圍限定

登錄浮層不是可以任意拖動的，它只能在螢幕的可視視窗範圍內活動。

6-1拖動範圍限定(03:20)

6-2練習題

6-3實戰題

第7章觸發打開及關閉登錄浮層

對登錄浮層的打開及關閉動作進行講解，並對視窗大小改變時出現的滾動條問題進行解決。

7-1觸發打開及關閉登錄浮層(03:02)

7-2練習題

7-3實戰題

第8章課程總結

對滑鼠拖拽特效實現過程的開發流程進行詳細梳理，並對每一步的關鍵技術進行總結，尤其是用到的函式部分。

8-1總結(03:21)

8-2綜合實戰題