簡(jiǎn)介:本課程帶領(lǐng)大家通過(guò)font Awesome字體庫(kù)完成圖標(biāo)的定制,使用CSS3新增的transtion、transform屬性實(shí)現(xiàn)動(dòng)畫(huà)效果,以達(dá)到對(duì)CSS3更深入的了解。
第1章 Resizable簡(jiǎn)介&實(shí)現(xiàn)思路
本章通過(guò)線上實(shí)例,了解Resizable的功能.給我們要做的案例下一個(gè)定義,確定界面樣式,功能效果,以及最終支持的交互操作。
接著介紹了Resizable的實(shí)現(xiàn)思路,先從界面的初始化到附加拖拽事件最后再支持面板大小的更改一步步的進(jìn)行闡述。
第2章 Resizable代碼編寫(xiě)
本章主要的代碼編寫(xiě),通過(guò)從界面到功能,從一個(gè)控制元素到全部的控制元素,一步步實(shí)現(xiàn)了附加控制元素,為控制元素支持拖拽,通過(guò)控制元素去修改面板大小一系列的功能,最終實(shí)現(xiàn)了我的們的效果。其中重點(diǎn)介紹了拖拽實(shí)現(xiàn)的原理,以及拖拽如何與控制元素結(jié)合來(lái)更改面板的大小。
第3章 Resizable總結(jié)
對(duì)案例的整體實(shí)現(xiàn)思路進(jìn)行了總結(jié),并歸納了其中的關(guān)鍵點(diǎn).最后給出了代碼中的關(guān)鍵API和思路。
第4章 編程挑戰(zhàn)
小伙伴們,根據(jù)所學(xué)知識(shí),修案例實(shí)現(xiàn)網(wǎng)格化拖拽,拖拽的時(shí)候以50個(gè)像素為網(wǎng)格。