【自定義動(dòng)畫】
《簡(jiǎn)介》
這是jquery當(dāng)中最強(qiáng)大的動(dòng)畫類型,它可以做一切其他動(dòng)畫的效果。它有一個(gè)外號(hào),號(hào)稱動(dòng)態(tài)的css。
《基本結(jié)構(gòu)》
animate({k:v,k:v,k:v},500) 作用:這個(gè)函數(shù)可以實(shí)現(xiàn)css中一切以數(shù)字為值的屬性的過(guò)渡動(dòng)畫效果。 是數(shù)字的值可以直接省略掉px來(lái)書寫。
參數(shù)1:表示要修改的css屬性集,前提只能是值為數(shù)字的屬性。帶有破折線的屬性寫為駝峰式命名法。 例如marginTop;
參數(shù)2:表示控制動(dòng)畫的時(shí)間。
總結(jié):它的使用方式特別像css函數(shù)的多屬性修改的使用方式。
參數(shù)3:可以不寫,作用是用來(lái)設(shè)置動(dòng)畫的緩動(dòng)效果,默認(rèn)jquery提供了兩個(gè)值’linear’,’swing’
參數(shù)4:也可不寫,參數(shù)4學(xué)名叫做回調(diào)函數(shù),什么是回調(diào)函數(shù),就是指動(dòng)畫執(zhí)行完了以后才執(zhí)行的指令。
***參數(shù)1當(dāng)中一些特殊值,jquery為css屬性準(zhǔn)備了3個(gè)特殊值表示兩種極端的切換。
K:’hide’ 表示最小;
K:’show’ 表示當(dāng)前;
K:’toggle’ 表示在兩個(gè)極端切換。
【加工函數(shù)】
*****簡(jiǎn)介:jquery當(dāng)中加工函數(shù)可以人為是最有用最有價(jià)值的函數(shù),他能幫我們做很多css的重復(fù)性工作。它的用處類似于for循環(huán)但是使用起來(lái)更簡(jiǎn)單。
《基本結(jié)構(gòu)》
$(‘div’).each(function(index,element){}) 作用:對(duì)選中的每個(gè)元素一次進(jìn)行加工。
重點(diǎn)參數(shù):index參數(shù):表示當(dāng)次被加工元素的索引值。就是一個(gè)數(shù)字;
element參數(shù):表示當(dāng)次被加工元素本身。注意用的時(shí)候需要寫成$(element);
總結(jié):工作當(dāng)中對(duì)于精靈圖的坐標(biāo)經(jīng)常會(huì)使用加工函數(shù)來(lái)計(jì)算得出,最省事。
案例總結(jié):
第一:如果希望制作所有瀏覽器都兼容的半透明效果只能借助fadeTo;其中制作透明背景要更麻煩一些,只能借助兩個(gè)標(biāo)簽絕對(duì)定位設(shè)置z-index從新組成一個(gè)盒子。
第二:大量重復(fù)性工作多用each
手風(fēng)琴案例總結(jié):
只有一件事需要你注意,當(dāng)容器中每個(gè)元素的寬度固定并且排列在一排為了保證不向下掉,可以使用一個(gè)非常好用的辦法。給出父級(jí)足夠大的寬度例如9999px;讓他足以容納所有的子級(jí)將來(lái)的寬度變化。然后通過(guò)父級(jí)的父級(jí)指定一個(gè)較為合理的寬度并且添加溢出隱藏修剪掉多余的尺寸。
【事件對(duì)象】
什么是事件對(duì)象?
任何的事件在執(zhí)行的指令里面填寫一個(gè)e作為參數(shù),將來(lái)這個(gè)e就表示事件本身。它可以代表當(dāng)前任何發(fā)生的事件類型。這個(gè)e是一個(gè)對(duì)象它的內(nèi)部就理所應(yīng)當(dāng)?shù)挠泻芏鄶?shù)據(jù)和功能,其中 e.pageX 表示發(fā)生事件的橫坐標(biāo)。 e.pageY表示發(fā)生事件的縱坐標(biāo)。
知識(shí)點(diǎn):
對(duì)于網(wǎng)頁(yè)來(lái)講最大的事件源就是document。
新的事件類型:
mousemove 表示當(dāng)鼠標(biāo)移動(dòng)的時(shí)候觸發(fā)執(zhí)行指令,這個(gè)事件有一個(gè)與眾不同的特點(diǎn)就是它會(huì)連續(xù)出發(fā)執(zhí)行多次指令。 原理是當(dāng)鼠標(biāo)在事件源上任何方向只要移動(dòng)1像素的距離就會(huì)出發(fā)執(zhí)行一次。連續(xù)移動(dòng)就會(huì)連續(xù)觸發(fā)。