2016年5月23日-案例筆記課堂

1、移動(dòng) web 和響應(yīng)式第 4 天課堂筆記（本課程共 4 天）班級(jí)：前端1 期講師：日期：2016 年 5 月 23 日老師：: sh愛前端官網(wǎng) ：目錄互聯(lián)網(wǎng)基本原理和 HTML 入門錯(cuò)誤!未定義書簽。目錄3一、4一、手指滾滾屏原理和滑動(dòng)輪播圖是一樣一樣的，就是手指移動(dòng)的時(shí)候，實(shí)時(shí)跟隨手指，手指抬起來的時(shí)候，要進(jìn)行一個(gè)決斷：是滑動(dòng)成功還是沒有滑動(dòng)成功，用過渡的動(dòng)畫顯示出來。所以，滑動(dòng)的時(shí)候：滑動(dòng)結(jié)束之后，手指抬起來之后手指滾滾屏和PC 的滾滾屏（T 管家）有很大的區(qū)別，就是沒有鼠標(biāo)滾輪事件，而是手指事件。手指滑動(dòng)的時(shí)候，實(shí)時(shí)跟隨手指的。touchstart:起點(diǎn)位置3touove:讓 irev、

2、next 有實(shí)時(shí)的 translateY6touchend:信號(hào)量的改變判斷是否成功滑動(dòng)1transition:all 0.4s ease 0s;1transition:none;二、zepto2.1 概述版的 jQuery，卻比 jQuery 還強(qiáng)大。語法和 jQuery 一模一樣，甚至函數(shù)的名字都和 jQuery 一樣。中文文檔：ht/doc/zeptojs api/2.2 選擇器zepto 不支持 jQuery 的自創(chuàng)選擇器，以下選擇器都不支持：$(div:odd)$(div:even)$(div:)$(div:last)$(div:eq(3)$(div:lt(3)$(div:gt(3)

3、CSS3 的選擇器通通支持：$(div:-of-type)$(div:last-of-type)1$(div).css(background-color:red);zepto 的哲學(xué)：只針對(duì)高級(jí)瀏覽器，不針對(duì) IE6、7、8、9。也就是說 zepto 中少了很多解決兼容性的代碼，有人統(tǒng)計(jì)過，jQuery 中處理兼容的代碼占了 50%。Zepto 是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript 庫， 它與 jquery 有著類似的 api。 如果你會(huì)用jquery，那么你也會(huì)用 zepto。也就是說，zepto 的$()函數(shù)的底層實(shí)現(xiàn)，就是 querySelectorAll。 quer

4、ySelectorAll 支持的寫法，zepto就支持；querySelectorAll 不支持的寫法，zepto 就不支持。zepto 不需要兼容低版本瀏覽器。再想想 jQuery，IE6、7 不支持 geementsByClaame，jQuery 就要玩命的用正則表達(dá)式去模擬支持。3$(div:nth-of-type(3n+2)2.3 常用方法、屬性支持 html 函數(shù)：節(jié)點(diǎn)選擇：位置：加類、減類：DOM 操作：jQuery 中的常見函數(shù)，都有，沒什么變化。1$().appendTo(div);1$(div).addClass(cur);1$(div:nth-child(4).offset

5、().left1$(div:-child).parent(section).children().eq(5).siblings().html(111)1$(div).html(11)2.4動(dòng)畫zepto 為了方便讓使用者的包達(dá)到最大限度的精簡，就讓用戶自己的功能。模塊的安裝很簡單，就是把模塊的代碼，到原來的代碼后面。zepto 的 aate 要比 jQuery 強(qiáng)大：zepto 的動(dòng)畫實(shí)現(xiàn)原理，是過渡！利用的不是定時(shí)器！不是 seterval。事實(shí)上，zepto 的源碼中沒有seterval 函數(shù)。所以 zepto 實(shí)現(xiàn)的動(dòng)畫，不抖動(dòng)、不、時(shí)間準(zhǔn)確、地點(diǎn)準(zhǔn)確。因?yàn)槔玫氖菫g覽器內(nèi)哲學(xué)復(fù)下：jQ

6、uery：兼容所有瀏覽器，選擇元素方便了，DOM 操作方便了，動(dòng)畫方便了，Ajax 方便了，改變樣式方便了。animate 的原理是定時(shí)器，不能進(jìn)行 background-color 的動(dòng)畫，不能進(jìn)行 transform 的動(dòng)畫。velocity：看做jQuery 的插件，增強(qiáng)了jQuery 的animate 函數(shù)，以定時(shí)器的機(jī)理實(shí)現(xiàn)了background-color的動(dòng)畫，transform 的動(dòng)畫。$().velocity(“roeX”:”500deg”);zepto：jQuery 的版，但是強(qiáng)于 jQuery。不兼容所有瀏覽器。 選擇器是 querySelectorAll、動(dòng)畫是過渡的實(shí)

7、現(xiàn)的，能夠完成包括 3D 在內(nèi)所有的動(dòng)畫。核的 C+來實(shí)現(xiàn)的動(dòng)畫。正是因?yàn)樗臋C(jī)理是 CSS3 過渡，所以 zepto 的 animate 函數(shù)能夠?qū)崿F(xiàn)背景顏色的動(dòng)畫、背景定位的動(dòng)畫、transform 的動(dòng)畫。而這些都是 jQuery 不能的。1$(div).animate(2background-color:red,transform : roeX(-40deg) roeY(40deg) translateZ(300px)5,61000,7cubic-bezier(0.13, 0.8, 1, 1),function()$(this).css(background-color,blue);1

8、011);有博客已經(jīng)一針見血的歷史舞臺(tái)。，在未來，所有的動(dòng)畫都是使用過渡實(shí)現(xiàn)的，seterval()實(shí)現(xiàn)動(dòng)畫，將要退出jQuery2.X ：不兼容 IE6、7、8，是輕量級(jí)的 jQuery。精簡了$()函數(shù)，也開始依賴 querySlectorAll 而減少了正則表達(dá)式的使用。jQuery2.x 里面的動(dòng)畫，還是使用定時(shí)器實(shí)現(xiàn)的，所以 jQuery2.X 也是不能制作background-color、transform 動(dòng)畫的。2.原生事件都支持，不需要引包，比如zepto 又提供了一個(gè)包，封裝了 tap 事件、swipeLeft 等事件。但是這些事件挺不好用的，需要手指松開才出發(fā)，不能實(shí)時(shí)影響元素位置。所以一般不用，而是用原生的 touch 事件。$(div).on(touchstart,function()$(this).css(background-color,red);3);三、滑動(dòng)慣性拋擲算法，也叫作滑動(dòng)慣性算法。這個(gè)算法最早來源于 Flash。就是手指拖拽一個(gè)盒子，手指松開之后，盒子會(huì)沿著當(dāng)前的運(yùn)動(dòng)方向繼續(xù)運(yùn)動(dòng)