js第八篇

【自定義動(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ā)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,271評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,498評(píng)論 0 2
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,939評(píng)論 18 503
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進(jìn)階之旅閱讀 115,545評(píng)論 24 450
  • 這個(gè)世界上,Miranda覺(jué)得最有趣最好玩的的事情,就是混搭,沒(méi)有之一。 “買買買”雖然也很有趣,但那更像是腎上腺...
    靈思異想米蘭搭閱讀 817評(píng)論 0 0

友情鏈接更多精彩內(nèi)容