00:00
那我们首先把那个PC项目的那个尾巴给它收掉啊,那这个PC项目的话,其实我们一共花了多少钱。啊,十十其实应该花了16天,是不是啊,比一区多了一点好啊,一天多的值得啊。啊,说了。现在呢?好,然后看,那我们来看一下,我们把这个尾巴给它收掉啊,是不是咱们差一个技动画没写,OK,那我们写这个K动画之前啊,呃,同学们出的问题最多的一瓶啊,就是最后一篇。啊,第五屏这一块啊,大家问题比较多啊,主要是做在这个鼠标事件这一块啊,咱们先把这个鼠标事件给你们去捋一捋啊,就一个是Mo。Enter most live most over跟most的一个区别啊,DEMO我不写了,我已经写完了,大家来看一下。
01:04
很简单,三个盒子外,In test test在最最里面啊,Test是蓝颜色的,最最小啊,其次是in啊,是个低平的,然后是一个外号。是不是啊,好,这是我们的是什么。Most特来看一下这点。好,来看是不是这样这样个形式啊,然后每次我们在每个元素上都绑了一个Mo特事件跟MO6事件。能不能理解啊,会会输出来是哪一个元素,现上的什么事件啊,我们来看一下,好F进来,好,我来刷一下,大家看我现在进入这个蓝源的这个区域。他会触发几个事件。你看我进去是不是触发三个事件,万和1TEST,这个能不能理解,这是冒泡报上去的吗?这是冒泡冒上去的吗?如果是冒泡冒上去的话,应该是test音啊外吧,现在是不是外音呢?Test啊说明什么?
02:06
我这么一进去,是不是相当于浏览器认为是同时进入了,这你看我进入蓝色区域不是就是干嘛。是不是其他三个区域都是算进入的。那不讲,其实有一个更狠的什么。来看这个定位啊,这里面我没有改什么其他东西,我就是把这个元素干嘛,相对定位定出去了,来看一下整点现是这样了,F进来大看我移动到这个绿,呃蓝色块上去,你看是不是还是错。啊,说明你能相信这个位置吗。不能啊,其实就是说触发这个子子元素的这个Mo斯特事件的时候,其实他会干嘛。顺带的把负元素的也干嘛出发下,就是你到子元素身上去的时候,相当于是在什么。负元素怎样处罚?
03:01
这个能不能理解啊,而且这不是冒泡。能不能理解啊,OK,那比如说我们再来看一个点。好,大家想想好,比如说现在我进来触发这三个事件,能不能理解,因为我这个蓝颜石是最最里面那个元素吗?懂吗?OK,那看现在我是不是从蓝颜色上面干嘛。出去啊,OK,只有你,你看我出来触发几个事件。Test吧,那想想他有没有冒泡冒上去?如果冒泡冒上去的话,应该出几个事件?如果冒泡冒上去的话,应该触发几个事情。大家看我的代码。大看我的代码是不是每个元素都绑着一模一样的时间的。而且这个结构是不是嵌套的,而且这个是不是同一个类型的事件。而且他们是用多的形式绑定的,是不要冒泡的。是不是来看一下,九年来我上来再说一下,进去触发这三个事件外一。
04:05
是吧,OK,我们来看那慢慢的,我从来是不从来生这个区出去了,你看我是不是出来了,出发了几个时间开吧。如果是冒泡的,应该要触发几个事件。几个三个事件。是不是应该要触发test leave in leave以及?外汇,可是他没有。是不是再来看,我再回去触发了一个test,触发几个事件,一个说明almost in特跟ALMOST6事件。有没有冒泡?没有啊,上来能看到他。看一下。没是什么六。
05:01
呃,这里面应该搜不到,那就搜这个MOS。OK,有个叫most event,看看有没有most,是不是它most event有鼠标事件嘛,OK,来看这里面有没有。有收到。来看一下。好。类似于most over。它们俩之间的差别是,Most不会。冒泡,这是他们俩的最最大的一个区别,Mostover是可以冒泡冒上去的,Most in呢?不会。六美甲好OK,那我们再来看。好,可是问你。第一次我进来这一块,触发这三个事件。是冒泡吗?不是,为什么进去的时候错了。这三个事件。
06:03
啊,因为你这个蓝颜色是子元素嘛,你进入到子元素身上的话,浏览器就你也进入到了元素身上。懂吗?所以说他就触发这30件,如果要是冒泡的话,不应该怎么触发。如果是冒泡的话,不应该先执行外的。如果是冒泡的光线,应该执行test的,能不能讲,那么你从这个区域出去呢?几个是假?是不是三个为什么,因为你这么出去的话,相当于从三个圆上面干嘛同时出去了。懂吗?可是你从这边出去就不一样。因为你干嘛只从这个什么。Test的出去了。还在什么?还在这个外跟in的身上。你看我在这边很干净,就触发一次。很干净,就是发一层。
07:01
这能不能理解啊?OK,那我们看另外一类事件叫什么?恶魔是什么?Over。好,Over,来看一下。好,跟刚刚是一模一样的套路,那我点进来。F2。好,我刷一下,看我进来先触发什么。Test over in over wio。这是冒泡冒上去的吧?是不是七实我你进来是不是也是触发子元素了,可是负元素的时间是不是也被触发了,你看我干嘛,我把这个定位给开开了。啊,不是,你看我一上去的时候,是不是照样也是test over in over over。是不是OK,可是机子是不一样的,这边是有冒泡的吧?能理解吗?OK,那看。我刷下走,你你看上来是不是干嘛触发这三四件,这没有任何问题吧,你看我从蓝色框上面出去的时候,其实应该触发什么。
08:05
如果他是很干净的话,其实应该是触发奥,你看他出了什么。他。你看他触发了什么,我们再看只有你。先先大一点刷一下进来算是三个,你看出去是不是先奥,这是为什么?Test,奥外什么问你,你刚刚是不是从身上出来的?是不是触发了他的欧斯世界,要不要冒泡?冒到谁身上去啊?你身上去啊,你那身上有没有摸的世界,要不要出发?外婆有没有欧骚的世界,要不要出发?那给你出房面,你出来了是不是就移到了我应达跟外婆身上来了,要不要?要不要依达欧巴,外婆欧巴。
09:08
需不需要?需要吗?那就给你出发吧,干不干净,一点都不干净了。是不是也就是说在里面元素沉积很多的时候的话,应该用什么试间应的跟力物吗?是不是没有什么成绩,是他们俩是什么一样的嘛,是不是就怕你里面沉积太多了,如果你像事件这么饱的话。你的逻辑他能捋顺吗?你都不知道干嘛,怎么触发的呢,懂吗?所以基本上不怎么用over,对。Out吧,是不是almost move事件都用的比较多,所以一般是Mo move most live有没有理解啊?OK,那看我们这个例子里面。好,那我们在写的时候,我们在写。
10:00
第五瓶的时候好,我们是一个,我们是一个什么样的过程,大家我们在第五第五第五瓶这一块,先咱们把动母结构我们捋一捋,第五瓶这一块这边最最外层是不是有一个div的。是不是div里面我们放了一个幺幺,为什么我们拿我们拿那个div啊。因为后面这边我们待会还要放开,我们说开元素不不想要把开发元素放在111里面。我们H编码规范里面说了,Ul里面不能迁到其他元素。只能放LYLY里面放什么你干嘛随意是不是啊,所以说我们蓝颜色这个是个div,红颜色这个是个ul里面是。L。L。是不是,那这个LY我就画一个行不行啊,我画在这边就是一个LY。是不是OK,好,现在如果没有气泡动画啊,我们事件是怎么绑的?
11:05
我们把时间给谁了?例。我们把这个。N的时间给谁了,L了,是不是进入到这个L身上的时候,让这个气泡出来。是不是问你气泡一旦出来了,好了就有问题。气泡一旦出来,我问你气泡是不是在这?是不是一个开式元素定位定上来的一个开发式元素,问你这个开发元素跟这个LY。是不是父子关系,他俩都没,他俩干嘛,压根干嘛。压根就没有办法说他俩关系,为什么?因为这个开是跟谁是兄弟啊,跟是兄弟。只不过你现在位置上面跟LY干嘛。一样了嘛,而且你这个开很有可能把整个LY盖住了。
12:02
如果这个时候你把欧斯再给的话,能到吗?触发不到了,因为是从看法身上出去的嘛,所以第一事件不能给LY。是不是就是欧盟斯利物世界,你不能给LYY。欧斯,欧斯慕斯能不能给ul?不能,你是从cameras身上出去的,开跟ul是兄弟节点。是不是事件能不能给最外面那个点压力。可以。因为你这个开发式是最外层那个div的一个子元素事件,能不能直接给开发。也可以,所以这里面你有两个选择事件,给最最外面蓝颜色的黄。两个事件都可以给男生大框吗?要不就。不对,事件能不能全部给来化,不能欧欧enter的时候干嘛?因为我要拿到偏移量的,所以说只能给O,就是说你进入欧盟斯恩的那个世界只能给出去,那世界能给谁?能给开斯或者给。
13:11
Div,是不是啊,我们现在我们现在我们的设计给了谁啊?看我们看我们看我们进入去的,进去时候这个事件给了来看什么,进去的时候事件给了LY,每个L码是不是出去的事件给了。啊,这个我改了应该给什么。我们之前应该给的是看法是吧,九点应该是没有任何问题的。刷下。MR。浏览器崩了。怎么那么短?傻屌。
14:00
狠不狠?直接杀掉。不会被我玩坏了吧?CTRLC啊看另外一个。另外一个干净一点啊,我比较干净这里。好,你看上来没有任何问题是不是啊,你如果把这个事情给LY试试。啊,现在我还没有办法写给L。是不是比如说你把这个事件给这个ul。是啊,看一下。刷一下。你看是不是就错你了。因为事件触发机制干嘛不对了呀,是不是啊。是不是啊,你看很明显出问题了是吧,可是你把这个事件你给这个题目三了。不是那个。走,你看行不行。
15:00
刷一下。出来想想出来。是不是可以了,所以这边你可以给谁。两个选择,要么OC,要么。停不下来。这能不能理解好,这是我们说almost live跟almost out事件它是有区别的,是不是好,那这边我们稍微总结总结,区别是什么,这种事件都是,其实什么都是,都是一种什么类型的啊,其实事件上面。也有说我可以,我可以带你们看一下。好,Mo out应该是在Mo上面。好,当指针设备移动在存在监听器元素的元素或者切。子元素身上的时候懂不懂,也就是说你给一个东西的子元素啊不你哦,你给一个元素绑,绑定的世界,你在他身,在他子元素身上去moover能不能出发。
16:09
人啊,就是就这句话,这这句话。是适用于什么?适用于这四个事件的懂不懂?当指针设备移动到存在监听器的元素获取子元素的时候,Mo over事件还有什么时间?某奥事件?没事。还什么莫斯利世界?没事。事件干嘛就会被处罚?懂吗?我们刚刚也看到了吧,是不是哪怕你定位定出去,它都是会触触发的,懂不懂,可是我们说也有区别。
17:01
什么区别,一个很重要的区别,OK,他们俩,他们这他们这两个嘛。有冒泡,他们两个没冒泡。懂不懂OK只你OK吗?他们两个是有冒泡,OK,这两个是五好好好记住啊,这这两个事情的一个区别,以后问到区别的时候不要瞎说了,就说什么第一个。他们的事件机制什么样的?其次,有无冒泡,那不讲,就再复杂的结构你应该也会分析了,好吧,好,跟事件流有关系,OK。好好,那这个我们就说到这,那我们继续啊来看。好,昨天我们做到哪。然后音频。好,是我们的音频啊,咱们唱什么查K动画是吧。
18:06
好看这开局的话怎么玩?完整版。好开心的话,有没有失落啊?关掉。好看你看到了几个结构,哎,正好卡住看到几个结构。几个结构,上面肯定一个结构,下面一个结构OK,当中有一根线,三个结构是不是OK,而且而且它是一个,它是一个这造城堡。是不是啊,那这个结构我们说写在哪。这个结构写在哪?结构在哪?是不是应该跟他们俩是同一级的?
19:01
是不是就直接上面来个D行不行,给个ID叫做马。是不是啊,OK,几个结稿。三个是不是给一个class。一个叫阿帕是吧,一个叫什么。是吧,还有一条线。是不是在那,OK,那就要是写姐们。要求怎么写?这是音频的,这最后开机动画电视怎么讲?找到这个什么马斯嘛,是不是马斯克底下的这个up。
20:02
是不是有个阿的这个二应该有多大。哦。宽度百分百高度为一半呗,是不是啊。宽度板板高度板应该怎么写?宽度就干嘛,我们说了宽度是一个流体的话,最好写百分百,因为凹凸跟白板还是在细节上面稍微有点差距的是吧,OK,看。高度多少?默认是是吧,给他一个背景发个光的。看B什么颜色。嘿,你告诉我,那我们做一个粉红色不管了。Pink是吧,好。刷一下你没有看到他吗?为什么?因为我打开的是音频啊,是不是你要看这个开真话了。
21:06
是不是还没看见啊,看看他在哪?是不是在这?啊,Mask本身没有。高度是吧,那怎么办?嗯,想想mask本身没有高度,确实。因为高度干嘛没有给他吗?他的高度多百分。是吧,好烦。来看一下外的高度是不是正好的。是吧,那我骂的高度为100%的话,为什么没有拿到?
22:00
Mask mask高度为。百分百这道题大家应该没问题啊。是吧?高度没有出来,这是什么?来高度给个值,看有没有100个值,肯定是有了吧。是吧,那就有问题了。而你这一层得定位啊。你知道的,它就动。把MAS改为百分百的话,应该去哪谁的广告?Wipe的。是不是?那为什么这个高度没有继承下来?高中就知道吧。百分百吧。Web HTML。高度为百分百,波形的高度也为百分百。
23:02
外的高度是靠内容撑开来的吗?是不是外,是不是没有拿百分百,是不是高度要一层层拿下来,OK,找到外。好像从来没有写过外国吧?从来没写过,是不是应该加在这边?那它的高度呗,摆看能不能拿下,刷一下是就有了。是不是OK,所以。没问题吧,是吧,还有一半是谁啊。大吗?但咱们是没给。OK,找到到是一模一样的,到的时候呢,到的时候给多少。是也是50%啊,是吧,只有你啊,比如说我给第八品。
24:02
好。是是一百八吧,而且你发现这个乘积是不是居然看到小鸟啊,这个面的乘积是不是应该最高的。是吧,你说马斯克这个面的成绩应该最高吧?是吧,那怎么办啊,新闻什么的吧,一样的吧邪不输入话就要注意了,这个外干嘛要自己写摆卖了是不,不然这个外是不是会计元素就干嘛。不一样的吧,是吧,OK,那干嘛。是不是就Z杠代词有多。我记得我给的最高的是99小一点,这边给100是吧,起来那就是不是就。看不到啊好,那这两个面的颜色换一换,好像是低。是这个鬼啊。
25:02
Blue John。好,是不是到了是不是OK,然后呢。Must提到什么是败,应该是点是吧,咱们给他取个名字吧是吧,这个高度应该干嘛定死了4PX吧是吧?宽度呢,暂时先给百分百是吧,背景。白色是吧,它这个现在啊。看不到他。成绩是不是,他的成绩是还要高是不是。CC110最高等。上来有没有看到他,没有,为什么。啊,我没有给他自己拼一量,拼量是呕吐。是不是凹凸,因为他们俩是快计元素嘛,是不是抵到下面去了吧,那干嘛。
26:04
让他主动的上来,那零是不是做呗零啊,这应该知道为什么。啊,应该知道我为什么这么写了,是不是OK,所以你看一下那应该。过来了,看到没有,OK,然后我们说这个top应该有多少。10%。然后呢,In什么in应该为多少负2PX,这样才比较精确吧,所以好是不是。那讲默认情况下,这个Y应该为。没有,是是慢慢的走到前面去,两边打开了是不是,而且我们说打开来,待会是不是要撑住他们俩的高度。是不是想啊,待会打下来应该是应该是怎么打下来会很奇怪。
27:02
默认情况是不是这样这样打开来的,不信你们看来我们先写吧,JS脚本怎么写?音频的嘛,来开机动画好开机动画我们是不是要去模拟一下加载情况,OK,那怎么办好,我们叫做loadingad d么?Loading animation是不是好,来一个function loading animation是吧?好怎么办?首先啊,我这边是不是有个速度啊。啊,这个数字就是干嘛,所有的图片的地址。啊,因为我待会会拿这个图片地址来模拟什么请求的一个情况嘛,是不是怎么办。负循环吗?是不是主动的去请求数组里面的例子啊,相当于是不是我们在请求后它的图标,因为咱们现在没有学到二小克嘛,那所以说我只能这么去模拟一下好吧,二什么Y一个什么I等于零,I小于什么a2.s。
28:18
啊,记得我们之前玩过开局的话。是吧,然后呢是吧。每次建筑怎么办?等于个牛,你们是不是模拟去加载怎么办?Src是不是等于一个地址啊,这个地址应该怎么写,Image底下吧,是吧,再去加什么。幺二。查一把,因为我的地址是不是都是在image底下,是不是这个能没讲,然后怎么去统计你有几个加载成功了。
29:04
还记不记得我是不是外面可以忘个flag的等于零吗?是不是OK,每次我们说加载成功会触发一个什么函数啊,触发个什么事件哦,漏的等于一个方形,代表你此次加载这个图片成功了,那怎么办?加,每次加价时候去抽中谁。是不是这个SPA的宽度要慢慢打开来了是吧,那是不是把这个SPA先拿到画一个,其实就是那根线是吧,应该等于什么。CC。OK ctrl v。Selecttl c是不是T?是它这根线的什么。
30:00
点点应该等于什么?比较什么?认识。Lem机。看去吗?这是不是就是一个百分比了啊,这是一个小小数吧,乘以100加百分号。是不是这个道理啊,看一下。刷一下哎,没有过渡吧,是吧,给他来个过渡嘛,这根线嘛,来个什么圈三行为一秒钟给他的CTRL保存一下看。慢慢到头,是不是你到头了,我才能让你打开来吧,是不是打开了怎么想。打开了怎么想?
31:02
应付什么?等等于多少?点认识应该要打开来了是吧,OK,找到谁。Up跟down是吧,也就是说mask底下了什么。Div。是不是在哪。找不到了啊,这边嘛啊,是不是在这边去拿是吧,是应该快吧,找到MAS底下的div嘛。快起来给他哦,那是两个面。面怎么说?好面吧,不管了,OK,他们俩应该怎么办?在在在这个里面怎么办。
32:01
打开了吧。两个的嘛,是不是你也可以直接写吗。哎,佳佳他们两个什么。Style点什么,Hat?是不是he?Hat应该干嘛?应该变成多少啊,应该加个I是吧?OK,它应该等于零是吧,你好一点的话加个吧,不加也行,其实是不,他应该也有动画吧,是吧,是不,他们俩应该都有全三行吧,只不过他们俩全三给谁啊,给hat。是不是这里CTRLCCTRLVCTRL这里看一下。
33:00
说一下。是不是都是往上动的。是不是有问题啊。而且这个线也没有干掉,对加载时候就上去了。也就是说,其实我不能写这边的一判断,不能在这里面是吧,在这里面写你说干嘛,你每次一的时候,只要flag等等于认识了我连这个什么。白色的动画都没有做完呢,他已经开始干嘛?高度变看到们去变零了吗?说不能写在这,那怎么办,这那个负循环吗?这里在负循环外面,我们什么你这个线它有一个I的listen呢,叫全三星摁的时候触发一个事件,是不是干嘛把这个东西干嘛。
34:05
拎过来是也是不是要判断一下的是吧,总你看一下这个数行不行。说一下。是不是逻辑对了吧,是吧,而且我问大家,其实你在这一块使用的话。就是在你全身摁完之后,我问你这个线要不要变美啊,要什么。This,点点。Display。Di play,第四,不应该变成no。是啊,所以你看一下。变没问题啊,只不过发现方向不对劲吧,高度肯定是往往上慢慢变小了吧,是吧,而且而且大家发现没,我是不是让他们俩变高度变零的时候的话,我是拿mask底下div吧,看一下mask底下的div。
35:10
是不是他们俩是不是,其实一个一个一个应该是往上,一个是往下,他应该是往上,他他不用变,他应该是往下吧,那怎么办。要用。它的高度一定要变美啊是吧,那怎么办?我让它的盆行为相对定位行不行?没有任何影响吧?好,看一下,刷一下。诶,还是不行是不是,那想想怎么办。现在怎么办?
36:00
我们看只有当的时候应该是什么样的。诶当怎么在上面。啊,这个是因为没有up嘛,是不是啊。嗯,来看一下这个up是怎么变的。别在这up,看他是不是。Down看一下它是不是到CTRL,看它们俩。都变美了吧,那这怎么办?我们说要改变它的一个布局方向吧,之前我们怎么做的?好,这好像是AB吧,是不是啊,都参照于这个马斯进行定位吧,它的波为零吧。是吧,来看一下这个是吧,就看这个档吧,看这个档在哪。是不是就可以了,OK,那干嘛打开来这就行了,所以你看一下刷一下。
37:04
好,好像是相对定位还不行吗?是不是因为它在文档里面有有残留吧,好像这个高度变化的时候,还是慢慢的往往上变小的吧,我要你的是干嘛。往往往下面走吧,那是不是干嘛,波子为零就行了。这个能不能理解,OK,那把这个阿尔法干嘛断了,把这个也断了,是不是S。好,那我开机,动画一旦完成了。我问大家,这个结构还需要吗?开局的话都没了,你这个结构就应该干掉,不然会影响我后续操作的。懂吗?那这个mask是不是得干掉他啊,智商吧,他咱们也玩过吧,是吧,OK,只要你找到这个什么mask。干掉。OK,那这个嘛干嘛。在什么时候?
38:01
在另外一个动画结束的时候是吧,那是不是我拿它里面的随便一个都行,只要在他的动画干嘛结束的时候干嘛,Listen全三的时候我就应该干嘛,你就应该变没了,OK,全年的时候干嘛,你这个mask就应该干嘛,点有remove掉。是不是来看一下,刷一下对我们的效果不会有任何的影响,可是打开来之后肯定是没有是吧。你看是不是外里面只有两。两个结构一开始上看外,里面是不是有一个马斯卡,打开了就就变没了,能不能理解啊,OK,还有件事情大家看。我这个音乐很奇葩,我刷的时候应该有音乐吧。是不是我刷开来才应该有这个音乐?
39:01
大家看我们这个音乐上来就是自动播放的吧,其实这样我干嘛,我帮你们去模拟这个效果,比如说我让里面一张图片错掉,那这个开局的话肯定是打不开来的,走你。肯定打不开来,差那么一点点,是不是这个音乐就起来了,是不是啊,好像我哎很开心啊,你的APP没有开起来,我们说的是不是在我整个开开完之后你再给我去啊不好意那不讲那怎么办,谁要打你走。怎么办?音乐不能是play。T就出问题了。把他干掉,什么时候开始播放?OK,找到这个涡流。
40:03
欧之前有没有拿到碗?我记得我拿过蜗牛。拿哪去了?这边吧,音频这两个也拿到什么。上面去。好,开机的话,一旦开开起来了怎么办。这边吧,OK,你不光要把这个结构移掉,它得OK,你你得干嘛拨起来是不是OK,那现在我让这个开局往下,现在我开通啊,走你。卡住不想是不是干嘛,要想是不是好像这样,好像是就很开心一样啊,你用户你这个什么APP没有开起来我很开心啊,不应该这样,那怎么办。把那个图片地址改回来。干嘛?因为你图片地址错了干嘛?开不出来了吗?是不是走你来刷一下。
41:07
是不是这这个时候才有意愿啊,OK,而且还有一件事情,大家看是不是这个。你看这个轮播下来时候自己就已经转了,其实这个轮播应该是干嘛开机话完了之后才应该出发吧,咱们是说这个轮播是不是自己出发的HOME3D吗?是吧,HOME3D能让他自己玩吗?不能什么时候调HOME3D啊。OK,一样的吧。在哪?在是不是这个底下去掉,我删掉。那边你讲这你来看一下说一下。整个效果会好很多,就在哪好到这边整个效果全部做完了,那讲好,我们做了很多优化,考虑了很多细节,OK,好,那到这一块全部完事啊,这时候你们再出的bug那就不管了,好,OK,关掉。
我来说两句