04_尚硅谷_h5实战_mac停靠栏

比如说我们待会儿要写个什么东西啊，大家看。好。好，我们来写个这个玩意。好，我怕卡，还是打开我那个比较。干净一点的浏览器中啊，这个这个玩意儿是吧，看上去好像好难实现。是不是看上去有没有思路。你要是有思路，我就走了。我估计是没什么思路，第一次看到就是我说这个东西怎么那么悬，是不是OK，来，待会我们实践一下，你会觉得好low啊，好，来看一下。啊，来看一下，我先把这个叫什么麦克挺高来吧，CTRLC直接贴过来啊，Ctrl b OK，我把这个页面干掉就行。好，这里面是什么图片，看这个图片多大，128乘128是吧？OK啊，都是128乘128啊，这个得信我。

好啊，都是要保险一报的啊，我不会骗你，好来看一下，所以来我来写一写。好啊，写不出来不要凶，我看一下好像有点忘了，来看一下，首先我们说你要化验面码，先分析结构嘛，是吧，你能看到几个结构。一个六个吧，是不是肯定有六个，是不是首先是什么，大家有没有想要把它设计成列表的。啊，能不设计成列表就不要设计成列表，是不是列表上面是不是嘛，蛮难控制的，像想你ul ly的话，说实话我用u ly，我就我就觉得特别烦。是不是第一个清单默认样式，第二个你去获取这个结结构什么的话，我就感觉有点烦是不是，那我喜欢比较干净的对吧？D码是吧？来个什么I及什么包裹区嘛，里面放五张图片不就行了吗？是不是干干净净嘛，Image什么S码是吧？Image里面的码一码走你几招走你看一下长什么样。

打开来是不是这样有点大是不是啊，我说图片有个特性叫包宽自一是不是，现在不是128乘以128嘛，明显这个是64乘以乘以64的大小是不是啊，你放到最大的时候，就是我128乘以乘以128的大小是不是啊啊，当然这种阴影，阴影不是我们画的。阴影是图片自己带的啊，虽然说我们可以画是不是啊，可是我还是不画，因为好像很难画的样子啊，一般UI在设计图的时候，这些阴影都会给你，都会给你整上，能理解好，那先首首先是把这些干嘛整小一点啊，是不是我们说干嘛？哎，我们说默认我们习惯性去干嘛，样式形下不清，问题蛮大的是不是啊，现在你要知道你写这两行代码到底在干嘛。

是不是OK干嘛问那滚动条也干嘛？亲一下轻轻，是不是滚头条干掉？哎，干掉还是不是比较干净了，是不是我说这个异面角是不是懂了，这个外盆底下的这个意面应该稍微小。小一点好，底下这个什么一面干嘛，只要改个宽度就行了吧，宽度改成一半那就应该小了。是不是差不多大小了吧，现在他们要跑到下面去啊OK，跑到下面去的话，应该再看现在这个外部有多大。告诉我外婆现在有多大？外盘外盘是这么大，会计嘛，独占一行嘛，宽度拿宽度宽度的问不到。凹是不是有点像百分百一样吗？不一样是不是，我们说百分百就是拿着你的吧，不安的百分百凹凸的时候有点类似于什么，就是你给他写马的话，他会给你什么抠掉的有点像。

我们之前说有点像book books啊，其实说的准确一点的话，有有点像markin books，因为你写marketin的时候，他会帮你干嘛。在里面干嘛，抠掉的吗？是不是啊啊，所以记住啊，这个一定要刻，一定要刻在心里了，好，那来看一下，现在我们说我们要干嘛。是不是先把它放到下面去啊是吧，放到放到下面去百分百要干嘛。要定位是不是谁要定位。肯定是你这个什么web要定位，一旦我在这个web，我说你的行为呃的时候，首先给我想到什么。完蛋，你的宽度应该干嘛？一旦我写它ing为么数的时候，这个元素的宽度的吗？靠内容乘开，是不是再也不是呢？再也不是默认值啊凹凸了啊，其实也是凹凸，只不过他网不是独占银行的嘛，是它是靠这个内容撑开的嘛，这个时候来看。

刷一下，你看整个外表的宽度是不是只有这么点了，是不是现在干嘛让他干嘛。所以说在写这些代码的时候的话，干嘛你要比人家看到的东西更多一点啊，这才叫学学习嘛，是不是啊，OK，干嘛这个嘛，B什么对我为零吗？Left也为。零吗？是不是这里，那是不是到下面来了，而且一般我们说现在你想让它变成这个样子的话，又要居中啊，啊问你能用。马定位奥特曼马上下位定位奥为奥特还行吗？不行，为什么定位起来就干嘛，左右居中就干嘛失效掉了。是不是说一般记住我们好像之前写过套路怎么样的，水平居中吗？

X等于。生长的，这是用的一个，这就是什么陀螺，首先外部的宽度，容器的宽度给我撑开。其次，因为里面都是图片。图片TN等于生就可以控制图片。因为你是因。应赖不课嘛，那这个是你看刷一下去通是吧，说这种套路我们经常去用，懂不懂，能不能看懂没问题是吧？好，那是不是布局就做完了，好一旦做完布局检查一下跟你的干嘛，预期到底是不是一样的，是不是来看一下，首先外预期跟你预期是不是一样的，差不多来看一下应面角就在这边排着。是不是好，其实一面就一面就之间应该有什么？是有空隙的。肯定是有空隙的是吧，比如说干嘛，我来看一下嘛，如果这个外壳上面来一个方差。三为零还会有这个空隙嘛，你看肯定紧一点了是不是，可是我觉得这个空隙效果干嘛蛮好的，那我就干嘛把这个空隙给大家留着是吧？好，那来看一下现在是不是就写GS了是吧？你看布局是不是都一样了，写GS的时候我们来看这个效果到底什么样的啊，好像我这个鼠标慢慢在我这上面慢慢动，慢慢动，看慢慢动是不是到一定距离的时候，下面就会有反应。

它会放大吗？让一个元素放大怎么办？SCC3里面吗？不是看到一个语速放大吗？好，可是你要敏感一点，咱们现在处理什么。图片图片放大好做控制的什么。外四就可以整体放大高分，这适一嘛，所以处理图片的时候千万不要用什么这scale去进行缩放，太烦了，知不道处理图片的时候就的外是吧？大家看是不是好像，哎，大家看是不是好像，我到这边进来的时候，只要我鼠标进来的时候，他们就会有反应。

来看一下整理。你看，而且反应还不一样吧，是不是，是不是好像只要在我这条线底下进来就。就会反应来看一下这一是不是这边呢，诶不是吧。不是吧，不是说不是说在我这条线底条进来就会有好啊，我刚刚说我们说不是的，这个下来它就就会有反应的，我们可以看到在这边是是没有任何反应的，本质上是是什么使他自己有一个半径啊，在它半径的辐射范围之内啊，它是有反应的，而且是每一张图片都有自己一个半径，在这个半径辐射范围之内啊，它会有这会有反是这。我们继续我们说，我们说我们刚刚已经分析到哪边了。斜边这一块吧，是不是走里我们说它自己会有一个半径的，是不是OK再来什么。

好诡异啊，我没有动，我的天呐。好比说这样吧，我这个点在这边吧，好吧，好过来好，我们是不是要求这条边啊，求这条边其实就是求求什么。求这一条，比如说我们叫做A，这一条叫做B。是不是求这两条边好，这两条边怎么求？这两里边出来了，这条C出不出来。决定出来嘛，勾股定理不会的话，你出门左转是不是啊，OK周你那这个A跟B怎么求。AB怎么求？首先我来问大家。问你这两段知不知道？这两天怎么知道？

可能在X，可能的Y，这不是我鼠标点击的位置吗？那你可能在XY，可能Y是不是就出来了，相当于四口了，可能在X，可能Y是不是相当于四口了，是不是那问你。这个是不是就出来了，这条面是不是就出来了。这条边是不是就出来了，对不讲，你看这条边这这两边这两边是不是就出来了，OK，好，我们干嘛返回一点。旁边是干嘛，这条边我们能知道，就是你鼠标点击位置可能什么。可能他往正向的。是什么可能它X是不是好，现在我们是不是求这一个B啊好，也就是说。现在问题转而求谁？嗯，看看还有什么颜色好。是不是我们要求这个B这一段。是不是啊，OK，那是不是转弯，就是来求这一方。

这个怎么求？问号这段怎么求？我的元素是不是这样的。是不是OK，问你这一段怎么拿到。这个能不能拿到OK，再加上什么字节宽度的高度的一半，就是我这个问号需要学的这一段能不能讲好，把它画的干净一点好，问号这段怎么求？问号这一段怎么求？元素到四口的一个像的位置，是不是元素点跟着帮你什么。是不是是哪一段。特别是哪一段，我刚刚讲的那个API拿的是哪一段。这一段。加上自己宽度的一半，自己自己高度的一半，自己高度一半怎么求？

元素点offset。除以二克还是欧塔？Of set，你边框我也得算的，虽然说你现在没有边框，可是按理来讲话就应该有set是不是啊，A跟B能不能出来？那C是不是就出来了，是不是啊，那就好做了，怎么了？不是不是怎么了怎么来首先干嘛？window.olo等于什么方形是不是啊？OK，要不要把页面上说的面就全全部拿到。肯定的，我问大家你要拿你是怎么拿的，鼠标点是不是在这每段是不是都要求。这几天要不要？都要求套路是不是都是一样的，都得求吧，是不是拿这几张干嘛跟你自己定一个半径去做比较，这个半径是不是我们自己来定的，比如说我说这个半径什么，就是等于130。

OK啊，那这个值干嘛，你属定嘛是吧，那怎么办？我还得去拿什么画一个，说什么image等于什么点什么那个什么所有什么。Y底下来了吗？明白是不是啊，我们说选择是最好是个缺点是不是好，这为你之后的功能的扩展啊大，然后呢。然后呢，事件发给谁，是不是我们说你看我是不是在这上移的时候，它才有反应，事件给谁啊。为什么在这？啊，给外面还是给麦，你看我在这边动的时候，它都有反应的。你看我我在这边动的时候，它都是有反应的。

事件给外婆吗？外婆在这？给图片图图片图片更小，图片在这给多个们啊，我在这个文档上面画的是个U应，你看我在这边画的有反应是不是干嘛多个文干嘛点on是么？Mo move在你身上滑吗？等于一个方形嘛，这个方形的功能就是干嘛看你滑的距离有没有大于我这个啊，小于我这个半径嘛，小于这个五半径是五什吗？等比例放大了是不是啊，那怎么办？是不是首首先干嘛，半径有了是不是我们要把刚刚这段距离全部给他求求到是吧，就求一下呗，是吧，怎么来。要不要循环？要不要循环，肯定要循环，是不是干嘛来一个负循环，另外一个什么I等于零，那喜欢什么？

点认识二。是不是一旦来家制作人，然后呢？干嘛去求什么？没搞。怎么求？不是要求这个A跟B吗？这个A应该等于什么？你在这个循环里面是不是求的是什么，每一个应该就是I嘛，待会不是拿每一个应该就是I就可以了吗？是不是每一张图片它所对应的AR，每一张图片它所对应的B是吧，这么求。A，是不是很很像哪一个啊？咋修一下想想。我就是我麦还干嘛？还点什么，先拿他到市口的。距离是不是它拿什么帮can rap点什么？

然后呢？叫什么叫自己的一半？宽度半点什么？除以二减什么？是吧，减。减去E是不是干嘛？EV等于EV或者一。是不是减去什么E点可能它X是不是乘乘以五平的那个A啊B了。开始什么？Top这个是什么？是不是我们把刚刚讲的一天基本上我都用了一下，而且用的很精确。

是不是啊，哪边用opposite，哪边有，哪边有top left，哪边用相对位置，哪边有绝对位置，心里是不是得有点逼数，是不是啊，那CC怎么办？是什么开个号码走，你是不是开号了。咋整卖什么？什么？是不是这个鬼哦，它不就开后面了，是干嘛A干嘛乘以A加什么B乘以B，那这个C是不是就出来了，是不是啊C加出来了。两个必要的东西是不是有了，是不是就是比下这个啊。是不是最终我们干嘛要控制什么。要控制什么image I点点。

那不ID是不是最终什么肯定是个P吧，是不是，也就是说当你这个R为一百三的时候，你这个外形带不到。应该会正好为128。哦，不对，应该正264是不是，因为阿为一百三的时候，你这个值应该是260是不是，然后呢。不是不是不是啊，是C啊，C为一百三的时候吧，是不是啊，你看我是干嘛慢慢进来的嘛，是不是到一百三的时候，你看正好开始要放大了吧，也说当C为一百三的时候，你这个值应该不就是当C慢慢变小的时候，你这个值应该慢慢变。大。是不是找你也就什么，如果用代码来翻译一遍，刚刚的话嘛，如果C干嘛。是干嘛？大于等于一百三的时候，你这个C就最好一直等于一百三不就行了吗。

是不是啊，你就这干嘛，只要你在外面干嘛，你在外面这个什么130，外面还的那统一都是130，为了我这边要干嘛。好算一点是不是，那怎么办？怎么让它变成64啊，128剪断。新。乘以多少零点一百三乘以多少等于等于60。段。一百三千多等于60啊，也就是64除以多少？64除以130，哇，这个值为多少？这样吧，我们搞一个比较好，比较划算一点，是不段128是这样，OK，等于等于120，其实C干嘛就大于等于什么。

20度这个C就应该等于啊是不是啊，这边干嘛，这边是不是128，那我是不是嘛，128乘以多少等于六少一点是不是OK，你看如果当这个C慢慢变小的时候，这个应该慢慢变多。满面大脑最大到哪？最多达到一百二嘛，你这个C的值你还能到到哪去啊。你这个C的值最小等于多少零方是不是，也就是你把它放到圆圆心的时段，它最大是不是？因为这个10C，你看放到圆心的时候，你这个C就是D方。那你讲好，那是不是应该已经做出来了。你看其实这个值我们给干嘛。太小了吧，是不是，你看是不是看是不是自己有自己的区域的，这个区域是不靠我们这个循环来维护的。是不是啊，我给你，当然这个值你们可不可以自己调？可以啊，比如说我调大一点对吧。

嗯，三百三百不好算，三百二三不好说好算一点三百二乘以0.2等于60吗？是吧，那我这个是改了多少。是的，这个能理解，这个值是不是你们随意自己可以去调整的。能懂吗？这个值能不能调整也能调整啊，只要你把它减完干嘛？默认当C等于二的时候，干嘛你减完等于。64就行是吧，这个值随意你们调整嘛，你看这个时候区域是不就就稍微大一点。你看我们是不是做了一个挺高难度啊。是不是啊，OK，这里面是不是做过什么，那些什么。位上的APR是吧？而且最终这个算法是不是极其简单？是吧，可能想受一点，干嘛想想吧，代码是不是只有这么几行，你看整整整把这个东西做完，是不需要这么强调嘛。就出来了，是不是比较简单，能不理解啊，OK。