jquery實(shí)戰(zhà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，可以使原