版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、絢麗效果教你做之JQuery實(shí)戰(zhàn)菜單效果簽約講師JQuery實(shí)戰(zhàn)本次課程實(shí)例展示Page 2JQuery實(shí)戰(zhàn)請(qǐng)大家注意,由于錄制本身的問型效果題,中無法看到鼠標(biāo),且鼠標(biāo)的位置稍微有偏差。課程中提到的瀏覽器兼容問題大家可以在自己的本地用不同的瀏覽器來測(cè)試對(duì)比Page 3JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):1.頁面中的菜單項(xiàng)可以通過嵌套的ul和li來表示2.菜單最外層為ul,一層每個(gè)主菜單放在一個(gè)li中,如果有子菜單,在這個(gè)主菜單的li中建立新的ul,再依次嵌套即可構(gòu)建多層的菜單。3.瀏覽器中ul和li元素默認(rèn)情況下文字前都有圓點(diǎn)標(biāo)識(shí)符,li元素會(huì)有縮進(jìn)。Opera瀏覽器比較特殊
2、,li的標(biāo)識(shí)符和其他瀏覽器不同。4.list-style屬性值為none時(shí),可以清除ul和li前面的小圓點(diǎn)Page 4JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):5.清除子菜單的縮進(jìn)值,需要padding和margin都為0,其中IE6和IE7只有margin也為 0的時(shí)候才可以清除縮進(jìn)值6.可以使用background-image來指定一個(gè)元素的背景圖,如果背景圖比元素的實(shí)際大小要小,那么背景圖會(huì)自動(dòng)在橫向和縱向上重復(fù)顯示,知道填滿整個(gè)區(qū)域7.可以使用bakcground-repeat來控制背景圖的重復(fù)填充方式。Page 5JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):8.
3、如果一個(gè)元素上同時(shí)定義了背景圖和背景色,那么有背景圖的地方是不會(huì)顯示背景色的9.text-decoration屬性值為none時(shí),可以取消文字上的下劃線10.background-ition可以控制背景圖的位置,屬性值既可以用數(shù)值,也可以用center,left,top這些值來控制橫向和縱向的位置。這個(gè)屬性的兩個(gè)值,第一個(gè)對(duì)應(yīng)橫向,第二個(gè)對(duì)應(yīng)縱向11.background-image的值為none表示沒有背景圖Page 6JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):12.background-repeat的值為no-repeat時(shí),背景圖不會(huì)在所在的區(qū)域中重復(fù)顯示。13.IE6以外的
4、其他瀏覽器可以通過設(shè)定display的值為block來讓a元素充滿所在的區(qū)域。對(duì)于IE6,則需要設(shè)定display為inline- block,同時(shí)設(shè)定a的寬度。14.display的值為none可以用于隱藏元素。Page 7JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):15. .main a和.main a的不同之處,前者選擇使用了.main的這個(gè)class的元素所有的a節(jié)點(diǎn),后者只選擇.main的子節(jié)點(diǎn)中的a節(jié)點(diǎn)16.show,hide方法可以用于顯示或隱藏元素,沒有參數(shù)時(shí)的效果和修改css的display屬性效果一樣。參數(shù)可以是為毫秒的數(shù)字,或者是slow,normal,fast
5、這三個(gè)文字,都可以來控制完成顯示或隱藏需要的時(shí)間。注意這時(shí)動(dòng)畫效果時(shí)靠不斷改變?cè)氐膶挾群透叨葋韺?shí)現(xiàn)的。Page 8JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):17.toggle方法更為強(qiáng)大,可以省去判斷元素是顯示還是隱藏的狀態(tài),直接讓顯示的元素隱,隱藏的元素顯示出來。參數(shù)使用方法和show,hide相同。18.slideDown,slideUp可以實(shí)現(xiàn)向下或向上卷動(dòng)的效果,實(shí)際上是通過指定時(shí)間內(nèi)修改元素的高度來實(shí)現(xiàn)動(dòng)畫效果。需要注意的是這兩個(gè)方法參數(shù)為空的情況和show,hide不同。19.slideToggle和toggle達(dá)到的效果類似Page 9JQuery實(shí)戰(zhàn)本節(jié)學(xué)到的JQuery及其他開發(fā)知識(shí):20.DOCTYPE對(duì)于JQuery中的動(dòng)畫是有影響的。沒有DOCTYPE定義時(shí),在IE中,JQuery的動(dòng)畫會(huì)出現(xiàn)閃爍的糟糕效果。21.float的值是left,可以使原
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 健身用包項(xiàng)目可行性實(shí)施報(bào)告
- 臨沂市建筑施工起重機(jī)械注冊(cè)備案申請(qǐng)表(A4版)
- 吉他罩相關(guān)項(xiàng)目建議書
- 擊球手用手套運(yùn)動(dòng)器件相關(guān)項(xiàng)目建議書
- 求職自我介紹(常用15篇)
- 剪線鉗項(xiàng)目可行性實(shí)施報(bào)告
- 剃須前用制劑市場(chǎng)環(huán)境與對(duì)策分析
- 醫(yī)用礦物制劑項(xiàng)目評(píng)價(jià)分析報(bào)告
- 低碳環(huán)保創(chuàng)意主題活動(dòng)方案
- 化學(xué)加工用研磨機(jī)項(xiàng)目可行性實(shí)施報(bào)告
- 壓力性損傷的預(yù)防和護(hù)理培訓(xùn)
- 計(jì)劃考核管理辦法實(shí)施細(xì)則
- 2024年工裝夾具相關(guān)項(xiàng)目營銷策略方案
- 通信系統(tǒng)施工方法和施工工藝(地鐵工程)
- 2022-2023學(xué)年無錫市高三語文上學(xué)期期中試題卷附答案解析
- 《物聯(lián)網(wǎng)技術(shù)綜合實(shí)訓(xùn)》課程標(biāo)準(zhǔn)
- 人工智能與智能交互設(shè)計(jì)
- 防范于未然安全無小事
- 水力機(jī)械原理與設(shè)計(jì)課件
- 經(jīng)濟(jì)開發(fā)區(qū)安全風(fēng)險(xiǎn)評(píng)估導(dǎo)則
- 2024屆高考英語一輪復(fù)習(xí)強(qiáng)化題型練Unit3DiverseCultures新人教版必修第三冊(cè)含答案
評(píng)論
0/150
提交評(píng)論