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