00:00
昨天东西有没有全部消化掉啊,昨天东西全部消化掉的话,那我们今天就开始啊,一行一行的去把我们这个PC的项目给他做完啊,OK,那做完这个PC项目的话,我之前是不是给过大家两个移动端的练习啊,其实PC端是不是也有也有两个练习的。我应该给你们看过吧,一个简历,一个门户嘛,OK,好,把这两个也贴过来吧。有点大啊,这边统一帮你们建一个文件夹叫做练习啊,那这个练习的话,以后可能会给时间给你去练啊,OK,那这个练习是都是比较大的啊,两个营销案例是我们移动端的。好,就全部干掉。
01:01
好,我看一下这两个点,PC的两个练习啊,PC的一个简历,简历的模板。啊,也是一种配角吧,而且都是有这种入场动画的吧,是不是其实跟我们这个项目是不是差不多。啊,OK,再来看这个门户。一模一样的套路是不是OK,再看我们要做的啊,其实我们做的这一版的话,可能会比他们要稍微的复杂一点啊,可是说实话我找的这两个的话,其实我感觉虽然说写起来没有我们那个复杂,可是整个交互上面这个效果的话,比可能要比我们稍微要好一点啊,我们来看一下,我们今天来把我们这个案例给他做了。好,我们打开。嗯,还没复习是吧,啊把昨天讲的先过一过吧。OK。
02:01
好激动了。好,第13看一下我们第十三都讲些啥。想想啊,这里面内容比较重要啊,今天我们所有的点都会用到,OK,我们说上来我们讲了什么多当中关于什么多中关于位置与尺寸的API是不是其实这种API有很多啊,只是我们把常用的,经常用的把它什么拎了出来啊,动不中关于尺寸和就先讲的是位置,动不中关于位置和尺寸的A片,好,首先有两个节点比较重要,一个叫什么?Parent node是吧?Parent parent node还有一个呢,Of such of ofet,什么是不是判断代表什直接负极是不是OK。
03:13
我不代表什么。有点像什么,有点类似于什么,CSS中包含快的概念啊,OK,概念啊,这边也给大家去指出来了,我们说这个包含快是什么,CSS中的概念是不是只能尽量去。模拟能不理解,OK,然后我们说这个判为什么那么重要。因为什么我们的offset,什么left和L1。FT和什么和top都是参照于参照于什么的。
04:08
内边距边界是不是啊,OK,那前端要学就要学的这么细呢啊,可能有时候需要更细啊,所以说大家要稍微的耐心一点啊,然后我们又说这个萨的一个规则。我们说它的规则是有教学问题的,是不是OK,我们说它的规则规则什么样。啊,这个第一点它是啥啊,我写A吧,我标A吧。谁他的规则,规则什么样的,想想就是就是去回忆我们最后那一把规则比较简单。首先上来应该分谁跟谁。是否为fix的定位,是不是首先什么第一个什么fixed你就记住嘛,Fixed跟什么非是吧,也不要按照我们昨天的嘛,记得那么冗余了,昨天我们说干嘛,我说没有带你们去写单,去写单位的话,你们会干嘛?
05:16
更加炸啊,来看下这个的时候是这些问题,火狐是不飞时候问你火狐他指向谁,我不的偶下他,看他指向谁。指向谁Bo,我们说它实现比较好,指向着玻璃是不是OK,我们还有什么,我们说这个我们说的是谁啊。本身定位为吧,那这个条件要加角,本身定位为fix是吗?不管你负极有没有定位,这是是不是这个条件OK,我们说火狐的干嘛非火狐呢,非火狐的是么?这个能不记住,OK,好,然后我们说哎,其实我们说说这个规则之前啊,你得说一下干么HTML和什么玻璃之间的什么may马对清楚,不然是不是会对你之后这个这个取值会造成影响的,讲OK,然后我们说我们说要分定位的是不是我们说说什么负结。
06:44
三。没有定位以及什么?负极有定位,OK,负极没有定位,所有的都是一样的。O判,三判都谁玻璃是不是负极有定位?C判都什么?
07:04
到定位腹肌是不是是不是到定位腹肌啊,OKOK,那家想想我们刚刚说偶的有点类似于这种不很快的概念吧,其实说的就是这条。是不是啊,负极有定位的时候,这是指向定位负极的,其他都跟我这个包概念是不一样,只有这一条才是一样的,而这一条是我们用的啊。最多的是不是,所以说我们说这个有点类似于CS里面的很快真的没讲OK,然后我们说什么,我们说的规则是不就出来了。是不是OK,好,这是我们说的第一点,那第二点已反正已经说到这了,那我们来说一下,其实昨天我们也稍微的去总结了一下GS的接容性问题。是不是啊,JS这问题我们昨天总,我们昨天总结了几个E为这是第一个肯定要讲的是不是因为跟是不是为什么这么写。
08:11
啊,因为这么有些浏览器底下这个E对象是给了回调函数第一个参数的,是不是有些浏览器底下是绑给了window点的,所以说我们要用短路后的形式去写,是不是这第一个第二个呢,最新问题。就刚刚讲的,我是不是还有呢,事件绑定,我们说事件绑定里面这教训问题还比较比较多呢,是不是我们说有爱的invent listen的,有attach invent的是不是爱,只有爱的invent listen这种形式才能指定你这个回调在补货阶段被执行。是不是,而且这个时候你也要搞清楚什么,特别要搞清楚这个世间。事件流的机制。啊,这个很重要,这个经常会被问到啊,我感觉并不是每个同学都干嘛都对他有,对他有比较细的一个掌握了,自己要多去测,多去练,对不道,那当然这里面还有一个机制,可能我我们昨天也没做知道吗?事件委托。
09:16
啊,之后我们会遇到事件委托,事件委托到底是什么,自己先去看看啊,之后我们项目里面会用事件委托,而且我们自己写事界委托好吧,OK,这点好,这是我们讲的什么,第三个接S度就的,还有什么就用点鼠标事件是不是还有呢。还有一个是不是适口的,适口尺寸的,我去是吧,我们暂时我们干嘛帮大总结是不是这五个以后遇到了我们,我们再往里面加,对不讲就以后问到你交心问题,哎这五个哎应该是可以可以去说一下的。啊,OK,我们再来走,你好,然后我们讲了什么?
10:02
好,我们来看一下,然后我们就讲什么讲了,哦对,讲了一个很重要的概念,什么什么叫绝对位置,什么叫做相对位置,OK,我们说绝对位置是什么。其实你就可以认为什么绝对位置是到玻璃的距离是不是啊,可是我们说也一样,我说你到这个玻璃的话,其实干嘛,到玻璃的距离也一样干嘛。去得把这个给去了,不然的话他也不算绝对位置,还还什么差那么一丢丢,就就差这个什么马给懂不懂,OK,什么叫相对位置啊,这个很好说,就是到势头的位置,到什么视口的距离啊,视口的距离OK好,那讲这个绝对位置跟相对位置时数的话,我们就干嘛,我们就要说一个点了,如果你自己原生实现。你自己原生实业你。
11:00
咋做,通过什么为了循环吗?为了循环不断的去什么累加好这个出口在哪,出口就在你这个嘛嘛,是不是这里面也有个嘛,在用原生实现的时候,这里面有一个比较重要的感嘛。是是判是now,是的,OK,它什么我们什么left是零。的他top它也是零啊,因为它这么设计了,我们才可以去累加,因为就说最终的出口在这嘛,是吧,是零,而且因为这两个值是零,所以说你相当于没加。是吧,那你最终再去找玻璃的帕塔会有影响吗?不会,你加上去的都是零吗?所以说绝对位置这个会有偏差吗?不会有篇章能理解昨天咱们是不是干嘛这么去实现的,能理解吗?能知道我在说什么吗?OK,那我们再来看。好,我们说,可是用原生实验,它有一个缺点。
12:12
他有个什么原生实现,它有什么缺点?干嘛?有那些时间就没有办法干嘛。没有办法干嘛,金融什么?播的是什么,是不是这个是不是就比较累了。人没讲OK,我们说相对位置的时间啊,如果你用你用那个,你用那个原则实间我应该怎么做啊,就在绝对位置什么。绝对位置的实线上干嘛,减去什么。减去滚动条滚动的距离,我们说这个滚动条滚动的距离代表的是什么?滚动条滚动时元素滚动的距离,滚动条滚动时元素滚动的距离有没有交性问题啊,有哎,我们说它也是有间性问题的,什么滚动条滚动的距离,它也是有交性问题的是吧?一般我们怎么想?
13:20
一般我们怎么想?Document点什么?Doc?有document直接去贴吧,document.document.element不是document.document element点什么?Top,然后呢,短路货是吧,短路什么多的点点多,因为有时候这个滚动,滚动的距离放在了跟标签上,有时候放在了玻璃身上,浏览器不一样,放的位置不一样,对不讲这种事情很正常,那我们来看一下,哎,这个我就不写了,有点长。
14:00
走你是不是就他是不是OK走你。好,记住它的一个写法,OK,我们说它也是一样的,缺点是什么?也是没有办法,干嘛兼容?跟是不是OK,那这个时候我们出来一个特别有用的API叫什么。房定点这个API是在。谁身上去定义的?是不是h HTML element?是不是啊,我们说这个API是不是只要你是HTL就可以去用啊,你看昨天我们是在在去用的,你看是不是一个HT。视频艾,还记不记得我们当时讲规范的时候多no的节点,记不记得最最上层是什么no的,然后呢,弄的总共有多少个个,是不是我们最最常常用的是什么多个门艾?
15:08
还有什么document element,还有什么?文档节点,元素节点属性节点什么?文本节点嘛,是不是多的,下面是不是有一个叫什么HTL。多个门他上面有什么,我这个借口就是定义在什么上面的吗?只要你是就可以用吗。能理解吗?啊,这个很重要啊,这个字这一得干嘛要记熟一点啊,好来看一下,那我们来说,哎,这个麻烦再听一下,为什么,因为拼不出来,好这里好这个一边,这个一天,他最重要是那个返回值,返回是一个什么,是一个对象,这个对象里面包括什么东西。包括几样东西有外是不是OK,还有什么?
16:09
好,这个Y是代表什么?的款是吧?为什么要设计成box款?因为我们有可能要拿其他两个点的啊。位置,所以说他才会设计成吧,那么讲呢的好,这里还有什么top,还有呢,还有top left left还什么。还有什么是是,还有什么X,还有一个Y是不是OK,其实在I里面应该只有这四个。
17:06
啊,它没有其他的懂吧,OK,那这个top代表什么?其实这个top left我们可以把它标成一组。是吧,是元素的左上角问答,这个左上角其实是哪个盒子的左上角。是不是有边框的那个左上角是吧,嗯了,我说这个元素什么的左上角什么它的什记住是相对位置。到谁的是口的,能解吗?OK,那波跟呢?右下角,右下角的向内位置,其他两个角能不能拿到,靠什么,Y是跟汉嘛,交叉减减是不是就出来了,你们讲这个XY呢。
18:00
就是它的一个副本是吧,因为干嘛我们经常XY是把它当成top left的嘛。是不是啊,你要是按照我这样写的话,应该什么。YX啊,所以top什么是吧,这样写吧,真纠结,做程序员真累,好整理好是不是这的好这个对象,而且兼容性干嘛。极好啊,很很难得一个什么这么好用的API,他的还记好,OK,这个API1定要记住啊,好好的把它利用起来好,然后我们什么这是关于位置上的,后来讲的关于尺寸的,尺寸这一块我们用么。其实就两组of是不是好,去去听一下好,一个是啊,看我就不写了,OK,还有一个是你看他也是谁身上的,T身上的肯定的啊好,我们来看一下这样一天啊,区别在哪?可能在外,可能在系列的。
19:13
嗯,谢谢。好,还有吗?HGHD。CTRLCCTRL好这个系列它代表什么?一句话可视取,你要明白什么叫可视取是不是,那我呢,什么你就想吗。我不懂吗?OK,哪怕你,哎,我们昨天好像有有个东西没有测大想你看我们这个是外的吗?看你波的马给啊,这个是应该多。
20:02
这个应该是多少?三百三百吧,这个呢,三百二三百二吧,因为你有播的十的嘛,来看一下是不是啊,是三百三百三百二三百二吧,是不是,可是如果这么写,如果你的box sin为呢,想想这个方为多少。就是。还是380,叛逆期应该到了,是不是一百九了?我了吧。是不是这个呢,两百两百吧,来看一下。看见没一百八两百两百,你看因为你是不为不吗?那么你去维度这个两百两百代表什么。代表波璃不是吗?那你这个就应该是200吧,是不,那这两玩意呢,不是减去波的吗?两边是十吗?那应该减20嘛,那就是么,180,一百八是不所不管你和模型怎么变,它就是它就是。
21:17
能不能理解,好,OK,好,然后我们讲了一个什么,诶,又讲了一个比较重要的东西啊,这个东西虽然小,可是特别重要,怎么去怎么获取什么,怎么获取视口的尺寸啊,现在我们在PC端只有一个视口,到移动端我们会变成三个视口啊,你要记住在PC端怎么去获取视口的字算。多可特点,多可们特点可能啊,这就是获取是否的宽度,一般我们拿宽度高度,基本我们不拿,高度是流失的,让他撑开来的。能不能理解好,那这个记记住好,而且里面是不是还有一些坑的啊,什么IE里面些问题啊,啊,你可以跟人家去说一说懂不懂,可是我需要你们是记住怎么拿石膏就怎么拿。
22:09
不要跟我去整其他幺蛾子了,懂吗?OK,那到这一块我们说干嘛,我们是不是多年位置跟尺寸的API啊,重要的帮你们过了一下能理解吗?啊基本上啊,我感觉够用啊,因为写那么多页面的话,我觉得你会这几个啊,应该没他问题,那还还有一个就是什么,因为身上的可能在XY。啊,这个也得记住它是吧,这是到市口的吧,OK,好呃,那这是我们讲的多位置跟尺寸API,那后来我们就做了一个麦克高来,相当于是不是把我们这第一个部分,你们讲的内容干嘛整体的练了一下,好,然后我们讲了把鼠标滚轮事件,是不是鼠标滚轮事件啊反正。在这鼠标世界吧,啊,不是鼠标世界,鼠标什么滚轮世界是不是OK,我们说什么。呃,应该是非火狐飞火狐这个事件叫什么?
23:05
On well well是不是车轮的意思?OK,我们说这个on well,而且它应该用什么形式去报多姆零啊,其实他也有动的形式,把这个去了就行了。对吗?OK,可一般我们用多姆尼去绑嘛,是不是我们说火狐里面只能用什么多二的息,OK叫什么do,什么OO多么某斯L是多少是不是,而且需要你去使用多么二的形式去保,是不是OK我们说干嘛,这里面还有一个比较重要的参数,在我的英的身上的,是不是?我说这个参数叫什么?欧什么什么。
24:00
Det吧,是不是啊,我看下是不是Del ta哇,一个都没写错,不一个都没写对,DL什么T要大写吧,是吧,OK,好,这里面叫什么?一点什么没懂吧,我们说这个东西干嘛,往下是什么?下是负制,下是负吗?OK,往上是这怎么那么不对劲哦,感觉下是负,上是正对没问题是吧,上是正直是吧,OK,这个呢,反过来啊。干嘛,上是负,下是这。是不是OK,然后呢,这个鼠标里面实际还需要注意的是干嘛,怎么取消,怎么取消事件的默认行为,好我们说嘛,有几个两个。
25:18
动是什么?直接干嘛?Return是不是呢?是吗?E点什么prevent before是不是OK e.P是吧,EFU是吧,是ULT啊。怎么感觉那么不对劲啊?啊,不管了,直接拎过来可以问他是不是啊,OK,一般稍微去把它干嘛判断一下吧,那么讲OK,这讲什么鼠标乐世界大家需要注意的地方,OK,好还有呢,然后讲什么,讲完鼠标讲这个曲线运动了吧,好,这个曲线运动这一块。
26:11
好,曲线运动这一块其实很简单,大家曲线运动,现在比如说我有一个快。你想让它去做一个曲线移动分几步,第一个难道它初始位置是不是,然后什么在一个循环定时器里面吗?是不是循环定时器里面让度数进行加加,因为干嘛,因为我们说我们干嘛,本来我们就有一个,就有一个东西叫什么。三角函数图像吗?是不是啊,我们是不是本身就有一个三角函数。图像的可能是这样的。是不是这本身就是一条曲线嘛,是不是我X轴代表的是你的什么弧度,Y轴代表是你吗?你弧度所对应的。
27:00
便宜量是吧,那我拿到你这个元素的初始位置之后,那么我在循环第里面让这个度数加加,我问你度数加加的时候。对吗?度数每一次自己是不是加,加的时候相当于就要去做运动的,我把这个度数转成这个弧度放到你的X上面,那是不是就是相当于我这条轴。在我这条这段码去进行偏移啊,是不是,然后我再去干嘛,找到你每一个点所对应的Y值给你的错吧,那我是不是就出来去这移动了。能不能理解好,其实我们把它翻译成我们的代码就是这样。OK,拿到你的初始值是吧?OK,曲线移动在哪?OK,你看后面这个就是什么曲线移动,这是我这个度数所代表的。弧度,这是我这个度数所代表的。值。是不是你这两个值在一起,其实就是我们那叫什么。
28:00
就那个上衣图像。是不是?能不能理解很简单的,懂不懂OK,我们再来看,好,那说完这个曲线运动之后,我们就把结合开法什么啊,这里面其实你只要搞清楚三角函数图像,以及干嘛怎么将三角。函数图像干嘛?运用到是吗。JS中吗?懂吗?只要把你这个三角函数图像干嘛,每个坐标对应到我这个中不就行了吗?能不能理解OK,那然后我们说结合开斯去进行什么,结合开斯实现起泡效果是吧,OK,这里面OK几个比较重要的东西。两个循环定时器,两个或循环。记不记得是不是我们说用开发去写这个气泡的时候,两个循环定时器两个或循环来看一下。
29:08
OK,来看只有你啊,看发式的基本套路我就不说了,来看一下,这是第一个循环定时器,这是第二个循环定时器,两个循环定时器嘛,是吧,想想第一个循环啊,我们先说这个第二个循环定时器,第二个循环定时器是干嘛的?这个定时器是用来干嘛的?它的作用是什么?维护一个什么,维护一个数组是吧,这个数组里面去填去放的是什么信息,记住是随机源的信息等等,比如说比如说会有什么。袁心。还有半径干嘛,Rgba值。
30:02
还有呢,比如说要做那个曲线运动的什么初始位置。只要你是信息就往这个什么数据里面放,是不是还有什么波峰波谷的值波波。播风一。波峰波谷的什么?波峰波谷的值还有啥?度数是不是OK,这些是不是都需要放,放到这个水机的什么信息里面去了,是不是OK,然后呢,第二个循环键是什么。呃,不,第一个循环是干嘛。第一个循环定时器就负责干嘛,负责动画。负责什么在开上面干嘛实现动画实现的话分几步,两步两个后循环,第一个循环干嘛,第一个后循环干嘛是用来做啊动画的是吧,好怎么去做动画的将是吗。
31:19
将随机元数组中的信息干嘛?将随机元数组中需要干嘛?动画的参数拿出来干嘛?进行平滑的累加是不?我先把这些信息给你什么?频繁的去进行什么累加,不然你不然你怎么实现动画,我是不是在一个循环定时器里面有一个负循环,为什么要在一个循环定时器里面,为什么要用这个循环,因为干嘛是什么上需要动画的元素干嘛不止一个。
32:06
不止一个,我现在才需要一个不循环吗?如果只需要,只有一个圆,我你需要这不循环吗?不需要不循环吗?就是因为我这个人太多了吗?是吧?OK,那第二个后循环干嘛?一模一样的,如果问你只有一个圆需要去进行动画的话,最终去开发上面绘制的话,我需要回去款吗?不需要,我直接去汇不就行了吗?是不是就是因为一个嘛,元素不止一个嘛,干嘛使用?开API干嘛进行绘制吗?就就就就这么简单吧,两个循环定时器,两个负循环,是不是你把这两个循环定器跟这个每一个负循环的意思啊用处搞搞明白,那这个气泡效果应该是比较简单的。能不能理解,OK,好,你看这是我们第一个循环定时器嘛,循环定时器主要是去塞信息的嘛,第你看这个这个循环定时器呢,两个或循环嘛,第一个是干嘛做动画的吗?怎么做动画呢?就把里面这个什么参数,你要动画的参数干嘛拿出来,我帮你干嘛频繁的去过渡一下吗。
33:18
是不是你看第二个分的话就是去绘制的。是不是,那当然这里面这个判断也比较重要,干嘛这个数字不能无限的增长啊,是不是OK1定要到了一个,到了一个点是后,干嘛是不是要给他删掉,那么你讲。好,那这是我们昨天讲的一些东西啊,还是比较重要的。
我来说两句