35.尚硅谷_css3_扇形导航.wmv原创

啊，接下来我们来做一个三星逗号。啊，这个东西很考察今天我们所学的所有的东西啊，有没有全部吃透啊，在这个东西，在讲解这个东西时候，我们还会踩到全身性的另外一个坑啊，OK。好，那我们来看看这个玩意怎么做是不是啊，首先看到它有没有什么感觉啊。没感觉是不是OK，完美有没有感觉再来看，首先要画，我们要画这个东西吧，布局咋做？看到几个结构了。就是现在我把这个动画给你们演示出来。你最起码看到几个结构了？你告诉我现在是从最外层嘛，最外层。一层层去设计啊，最最外面要不要一个包裹器，这个包裹器是干嘛的？我包过去，应该这么打。是不是结构上面，它肯定是最最外层的面积上面，它要它要这么大吗？这么大吗？不需要，因为我用户上来我就看见这么大。

那我包裹成就这么大，所有的图片全部叠在一块。是不是啊，然后干嘛，我一点是不是就就就全部出去了，是不是这里面肯定有五个结构，可是你没发现这五个结构的行为是不是差不多的，要不要拿一个东西来包裹一下呢。要不要？要不要拿个东西来包裹一下它？要不要包过，肯定要包过是不是啊，OK，那也就是说现在我们设计了几层。其实最外面一层是一个什么？一个包裹器是不是包裹器里面应该有什么？有一个比较大的容器，这个容器放五张。五张小图外面有一个容器是放我们这个home背景的，是不是？可是这是不是只是S结构啊？钥匙上面不是这样的吧，钥匙面其实最外面这个容器的大小就是这么大。

那么讲，我们这是在设设计STL的乘积吧？能理解吗？OK，那我是不是得画个页面了？OK，那就画起来是不是？OK，来来做一个导航好零五呃。零五善行导航。善行，Oh my god，扇形导航是不是OK？几个接口上来，首先来一个did，叫做。不是吧，再来一个div，叫做。音了是是最后给拉拉性能可能稍微高一点，给音了，是不是里面呢。

五张图吗？是不是图片地址干嘛？拎过来嘛，来去找一找，是不是就它们CTRLCCTRLV。走，你好，来看里面是不是有五张图啊，有六张吧，咱有六张，123456，还算背底图吧，这个叫home键吧。是不是这个是去干嘛关闭文件的嘛，全屏的打开文件的后退的刷新的，是不是看你们现在是不是看到只是只有这个动画效果啊，看着我点上去没有动画效果。有是不是，而且我打开的时候，他看是不是转出去了。是不是上面好多动画效果的吧，是需要我们去实现的吧，而且我点home键的时候，它是不是也转的，Home键是不是在转，看不到，是不是看见看见没有home键这边在转满屏，我身上它有home键是他是不是在转的，OK，而且有没有发现这个后这个home键有个刀锋。

对，一会往出甩。是不是啊，嗯，这个图片这个得让UI去设计的，好像是不是有个阴影啊，其实这个阴影我们也能画是不是啊，只不过我们画的这个阴影的话，就是可能会没有原设计那么好懂吧，OK。OK，那来看一下我们怎么写。我们应该怎么做好。首先。Image底下的第一个是什么？关闭的吧，那就是close是吧，走第二个呢。第二个什么全屏的，全屏应该叫做是不是好，再来个什么。再来个什么？还有什么？打开文件的应该叫open吧，是不是？OK，来五个吧，好，还有一个叫做。Open是不是OK，然后呢，这叫后退的是不是PP吧，好，然后是一个刷新的。

好走，你来看一下这些页东西是不是应该上来了，上来了吧，是不是OK，可是现在特别丑吧，是不是OK，那我应该怎么做，我F12是不是好看一点，怎么做？首先我们说底下还缺一个结构是吧，给一个class吧，叫做。Home是不是啊，首先外部这个容器好，给他一些样式好行马给它干掉，判定给他干掉是不是外部这个容器大小。是不是应该跟我这个后面元素大小一样，是不是看一下我这后面元素多大。多大尴尬最好给50吧，我们稍微好算一点啊，大方一点就给多少。Y为多少？50PX50PX先来一个背景，看它在哪P，让它占个位置是吧，看看在哪走，你在这吧，最后这个后面键是不是定位定到什么。

左下角来的，而且我们说干嘛，我们说这个home键展开的时候的话，最好不要出现什么系统滚动条啊，那怎么办。禁掉是不是先把它禁掉那个嘛，HTL玻璃来为100%，OK，什么鬼啊，黑等啊是不是走你好，OK没了，然后他定位地下来吧，最好是个固定地位。是不是啊，OK，那就是其实这个时候固定定位绝对定位啊，都一样是不是啊，OK，那我就固定定位一样吧，特定行为什么FA子行不行啊，不是其实也是一样嘛，OK，问你我为比如说fix之后left跟top的默认字为多少？

零吗？凹是不上官网上面去看一下，上上看一下，其实干什么，你比如说现在我这个外不是在这边吗？你不是定位起来了吗？你看如果我前面有些元素，你看它的它的位置动不动动的吧，你看如果我把它的left设置成零，Top设置成零，那是不是就顶上去了。OK，默认值不是零，是O凸啊，你前面有文档流，它还会在文档流后面排的，能不能理解啊，OK，好，那其实我们应该是希望它是啊，在这边的吧，是不是，那就是吗？Right OK和体贴OK是不是啊，OK，你给我下来是吧，我也没有出现滚动条，虽然说我有些元素溢出了吧，是吧，我说是不是稍微有点空隙的是吧，那就给个正的还是负的。

正是正的，他就会稍微上来一点嘛，是吧，好大方一点嘛。那你上来个11吧，宝宝，15OK，给你拿下。好多点了吧，是不是OK，然后我们说怎么办，你几张图是不是叠到一块去了，那怎么办，找什么，我们说找外底下的点应了，我们说选择是最后写的精确一点好对你会有帮助的，应那底下什么所有的卖干嘛。为我一写到是不是就应该全部叠一块去了，走，你全部叠一块去是吧，为什么？为啥？你定位起来不都要提升成绩了吗？成绩一个比一个高吧，可是就是比Z杠一一来的低。

是不是OK，所以说他们是不是叠到一块去了，而又因为你是在我这个元素内部的吧，我前面也没有占据文档的元素啊，那别说我这样呢。肯定会下来的，能不理解？OK，我们说默认，我想让你干嘛拖，一定要玩。是吧，一定看吗？你在这上面吧，啊，我有想这个元素居中怎么办。啊，居中方案有很多吧，最简单的大家想想，现在我这个里面是元素是吧，看我这些土味多大。事实啊，说明旁边粉色露出来多少？8PX是不是啊，那最最简单的居住方案，这是个最简单的居住方案，用不用啊，用不用啊。最简单的驱动方吗？是不怎么简单，怎么用，懂不懂？

不，这个我待会要动的是不是啊，你看他们待会干嘛，他们待会要出去的懂懂，你如果用我们之前那种定位方案的话，就没办法做了，因为最终我要去动left根托的值的。能没理讲说不能什么left为零，Top为零，波为零嘛，这种做方案，所以这种居方案，它也使用场景的时候，是不是也有局限的，所以哪个简单跟你的业务场景匹配，你就用哪个，懂吗？OK，然后再想。现在是不是在。中间了是不在中间，我们说你这个home键应该是有背景的吧，那个嘛。找到这个一呢，找到它底下有什么。啊，不是一大了这么后，后面的大小跟谁一样。跟这个外是不应该要一样是不是，那怎么办？其实最后写个外是百分百，其实外不写也行，默认就拿百分百吧，是不吧，来给个背景颜色看看，我给个低的来看能不能盖住。

哎，盖住了是不是OK，那给他一个背景，为什么URL多少？Image底下的home点先击吧，No是吧，看看走，你这是什么鬼。啊，层级不够吧，是不是啊，那我就应该让他的，因为他没有层级嘛，是吧，那就尴尬了。那就干嘛直接能写一一代词吗？啊，我没定位啊，是不是那就为啊，一旦行为之后，高宽都是靠内容增开的吧。是不是，那这个要不要默认去指定。你看我这么一写的话，大家看这个背景还能看到吗？没了吧。没了吧，因为你没有宽度了，我是吧。

全部照做是不是OK，然后把这个拼着干嘛。给它干掉，是不是我不知道这个平衡嘛，是不是他们是不是都在这了，OK，而且所有的图片是不是在后面叠着呢，是不是OK，我们说应该它应该是个圆角吧。是不是你看我这边干嘛。干嘛，我们说干嘛。让它是个圆50%，则你。啊，里面的东西也要50%找你。好，现在是不是都是圆了，是不是OK，那布局是不是就做完了，切记还没有，一般写完布局之后一定要给我检查一下，看你一下这个布局元素是不是跟你的设计是一样的，懂吗？好，我们可以来看看你。来看这个外50乘以50设计跟不跟你一样一样，我希望的是吧，再来看里面这个home键，50乘以50是不是你期望的，确实期望的一呢，没有高了。

对钥匙，对钥匙造不造成影响。对你的展现造不造成影响，不会造成影响，可是你想如果你之后还有JS逻辑，你去拿这个的高。潜意识里面你会认为这个英大的高深红事啊？现在呢，零吧，会不会对你以后编码造成影响，说写完布局之后先回来看一眼，看看每个布局元素有没有达到你的预期，对不懂，很明显这个一呢没有达到我的预期吧，那怎么办？你如果项目写完了再来改的话，那就累了，好吧，OK，百分百应该就可以。OK，你看汉代位表，这个后面是不是出来了，后面被挤出来了吗？是不是，那这个后面应该怎么办？因为你是给他是的定位干嘛，你是呕吐的呀，是不是前面有占据文档留的元素的吧，那干嘛？

呃，左上top吧，是不是只要你给我上来，现在完美了，现在是真正的叠在一块了。能不讲刚刚刚刚他为什么会下来啊，你这个音呢，没有定位的，你现在还去给了他高度啊，是不是要把你这个什么，把你这个后面给撑下来了，他是占据啊文档流量懂吗？OK，他们俩是兄弟元素啊，所以说你一定要干嘛，Left top等于零，干嘛顶上去啊。能不理解啊，不然的话，它的left跟to o two啊，就会默认在这个音的下面的，能不理讲OK，然后我们说整个布局到现在啊，应该圆满了是不是，然后就得写减了吧，来看第一个减时效果，咱们其他先不管，反正每次点上去之后，看这个后面键是不是在转，第一次是第一次逆时针转，第二次顺时针转，是不是有个切换的逆时针顺时针，顺时针逆时转，是不是这种东西好写。

怎么写来个的脚本吗？最好是温点的问你，你不写window点的，你在外面去获取个元素，有没有可能获取不到有可能。是不是OK，因为有可能这个动数还没构建完，你们讲好，那这边怎么讲，我去拿到谁好么什么一吧，是等于什么。多亏没的点Q要块。什么鬼？啊，这个Q是，这个Q是快捷定我的妈呀点Q。你把这个home给我找到点home是不是找它的选择器嘛，OK，好点后之后干嘛，我们说这是不是类似于一个切换的一个效果是吧，那好做上来给我设一个标志位，Flag等于是吧，给这个home去绑定。

事件点O什么？OK个行不行，等于一个方形走，你在这个事件最后flag等于取反套路，套路是不是套路啊，以后编码你如果能把思路写成套路，那你就有了没讲OK那这种干嘛？我们说明显是一个切换效果的，那就块可以使用这种套路懂吗？OK，同学们耶啊。FLAG1种形式，Else，这一种形式是不是OK，我们说上来你应该为板，说上来你应该是逆时针，你看这什么，上来第一下吧，好，第一下应该么逆时针转吧，是不，那怎么办？我问你这里面的时是谁。

后是吧，认识点是点什么。等于什么，咋咋转？逆时针RO应该是个负值，是不是我转个负三千六可不可以，你管我质量来看一下这个你看看F不是看。转没转？转没转，转了没过度，是不给谁家过度。全三，一秒钟是不是转死他？走，你看到没有，是不是，我点击一下是不是得回来，那干嘛，回来是多少，3600多啊，回来是不是3600多。回来是不是多印度啊，到你原来那位置吗？是不是走你。

出去回来，出去回来是晚一年是吧，只不过这个也太大了，好吧，七百二是不是找你。差不多了是吧，好OK，那这个功能做完了，好OK，我们踩坑看着。这么写有没有影响？这有没有影响？这没印象，这没印象，没有响吧，我说放为一啊，现在你没说放吗？是不是啊，好来看一下你发现第一次是不是赚了，第二次还赚吗。不转来刷一下第一次你看，嗯，你看这个home啊，我点一下，你看这home是个嘛，负720说这范为一啊，我再点一次，你看赚不赚了，不赚了，这个旋转为零棒，OK，全身性的第二个坑。

记住全三性，我们讲了两个坑，第一个坑是什么？坑在在元素首次渲染还没有完成的。结束也行，是不还没有完成的情况下，是不是是不会触发过度的。是不是OK？第2.ok在什么？变化。呃，在这个这个，那就这个过渡，在这个变换里面去使用的话，会有一个很大的坑啊，在绝大。

部分。变换函数中啊。如果。嗯，怎么怎么描述，想想在绝大部分变换函数中，如果变换函数的位置个数不相同。也不会触发过度好两个点。在绝大部分不是变换函数啊，在绝大部分变换样式切换切换时，OK，如果变换函数的位置跟个数不相同，不会去换刻度，什么意思？大家看现在我们是不是一个变换样式的一个切换。

是不是，你看我这里面是不是两个变化函数是吧？你看它们俩的个数一样吗？不一样看看。走，你。刷一下，你看第一次转不转，第二次转不转。没有任何问题吧，看一下我把位置换一换。我问你旋转跟问你旋转跟缩放这个位置换换有没有影响。也没影响啊，里面没有没有任何坐标，没有任何位移啊。没有位移的话，就没有什么没有坐标的移动啊，懂吗？你坐标系怎么变干嘛，最终不就是转一转，说发一下嘛，说发一下转一转嘛，一样的，真的说变换的时候，如果这两种变化组合在一起的话，其实顺序是不用考虑的。

懂不懂啊，虽然说这个虽然说成本矩阵的方式不一样，可是最终结果都是一样的。那么就叫OK。可是我们来看这个时候。第二次转吗？你看第一次是不是转了，第二次转吗？不转了，因为你干嘛位置都没不一样，懂不懂，这是过渡的第二个坑，切记啊，那他们俩的位置也得一样嘛，就是在我们这个待会里面，其实我们不需要变换组合，我们写一个变换就够了，是不是待会你们会遇到变换组合的，到时给我清醒一点好不好？OK，那到这一块大小好，那我们又踩一个坑是不是好，那踩完这个坑之后我们再来继续。好，那现在是不是把他们甩出来了？是不是现在我这四张图在哪，还是在它下面吧，你看还是在这边干嘛点着了嘛，那我是不是点一下他们得出来啊，你看好，我问你点一下怎么出来。问你这个动画需要你写吗？

动画需要你写吗？你只需要管最终这几个位置就可。你把这几个点给我定下来，最终我过渡过去不就行了？是不是啊，你们一开始位置不都在这边吗？我让你过去，过去不就行了吗？也就是你把这几个位置给我确定下来，是不是这样的好，OK，那我们来看想想。一个位置。两个位置。三个位置断了。这。是不在的，好，我问你这这五个点的位置能不能求到。首先红颜色这条线长度你能不能求到，怎么求啊，自定义嘛，这个红颜色的长度这个线干嘛，是不是自己定义的，你想它跑多远就跑多远吗？我第一个。

完全没问题嘛，如红颜色这条线的长度肯定是一致的，是不是？那我再问你。这个角度一不一致，22.5吧，一个角两个角，三个角，四个角，是不是90除以四嘛，22.5嘛，是不是已知一条角，再知道一条边，我问你这个点的坐标能不能求到，这个点坐标肯定能求到就什么。YY轴这个嘛，一百四嘛，是不是啊，那就是这个点的坐标里面去了。能到。不就是来看一下。是不是就是求粉颜色的这两条线？是不是就是求粉颜色两条线嘛，颜色这两条线，两条线能不能求到，知道一个角度了，知道第三条边了，那两条。

对边跟邻边不就出来了吗？Sin cos啊，Sin等于对边比斜边，Cosin等于邻边也斜边，那是不是就出来了？那我能不能写个函数，把这些坐标的点都算出来。没问题吧，是不是OK，那你们抽函数是不是要红啊，来看怎么抽比较好抽啊，反正我现在已经知道功能了，是不是啊，我说干嘛已知。你吃什么？已知第三边是不是OK，上数学课了，已知第三边和一个角是不是好和一个角。啊不一个诶怎没有角角角啊和一个角是不是OK，已知一已知第三边和一个角，要求出另外两条边嘛，就是是不是我写一个函数嘛，叫方形这个嘛，给point是不是已知第三边C是不是变一个角度，第一级是不是你要给我去干嘛，Return出一个。

对象来是不是这个对象，比如什么XYXYYY是不是X就代表当中什么X轴上面那条边，Y代表Y那个边，这是干嘛。他们俩这是X，这是Y。是不是OK，怎么怎么做。怎么做？一个X应该等于什么？这个是一个属性吧，这是一个变量吧，这叫属性名吧。这个叫属性名，这是变量，这是变量吗？那不讲，那我这个X不就是这个变量吗？这个X跟这个X有关系吗。

这有啥关系啊，这个词我叫left也行啊，只是我想为了干嘛，就是为了就是就是不是看得出就什么贱名之意嘛，是不是，所以说我取了一个X跟Y嘛，这能理解吧？OK，那Y跟X应该等于什么？慢点。是不是求哪一条边啊？这条边啊，你知道这个斜边跟一个角吧，是不是啊，OK，那那这应该怎么求啊？求这条边这个斜，这个斜边知道了是不是？OK，这个角角也知道了，对边比邻边码商一嘛，是不是啊，OK，那是不是拿这个第三条边去乘以这个上一次就出来了，OK，那什么第三条边不是C吗？是不是也就是C乘以什么ma点什么上一吧？好，上面我跟的是一个弧度吧，我这边传肯定传真肯定是角度吧，第一季干嘛角度转弧度乘以。

点点派除以一百八是不是OK，我问你X就出来了啊，最好出来的不要是一个什么。你们想想，最后出来的。嗯，这个值最终出来，这个值最后不要它是一个小数是吧？点是不是啊，因为我们说JS计算小数，这是有点二是不是，OK来个Y这里，那这边呢。他是不是。出来了吧，这个函数就出来了，现在我只需要传这个C跟这个度数吧，啊，这个度数怎么传的问题，第一个点这个度数应该传多少。22。这个点。

距礼貌。第一个点不是零嘛，是不是第二个呢，22.5，第三个呢，45累加的吧，能不理解，OK，那这个点就能出来了，是不是怎么办？现在我是不是要让这我问你啊，我求的这个点它有它有意义吗。我问你，你这个圆是不是跟他做是不是有定位关系的，我们来看一下。啊不，我要看我的，你看我这些1IMAGE是不是都是定位的，定位定位相当于谁的。一有没有定位没有。那就于是不是是不是这。你不是参照我来定位的吗？那你刚刚求的这个坐标是不是就是可以是我的了，这个拖。是不是啊，能不能理解啊，OK，那我是不是就是这个XY，其实就是我最重要的什么left的歌top吧，要讲好，那怎么怎么办，是不是每张图单位都要转的。

是不是，那这些图拿到等于什么多的点Q得到什么。这些麦就把选择在哪是不是，它CTRLC直接拎过来是不是，怎么办，每次我点击时它出来吧。这边写一个什么是不是，写个负循环是不是，干嘛胡说嘛，画一个I等于零，I小于什么点，认识爱加加是不是，这边怎么办。每个images I应该干嘛？干嘛点什么掉点应该等于什么？

这个函数求出来。它求出来是不是个对象，它点left，你反过去来是个对象嘛，好，这个C怎么办，我自己来定义，这个是我自己来定义的，我定一百四行不行，没问题，度数怎么办。都怎么办？跟这个有没有关系啊，有。是不是？怎么怎么？求90除以多少？Image时间。认识的。是不是你要分？几个角？五张图五个角吗？是不是五张五个角？算一下1234个角，一二三四九十除以四。

是不是啊，那我这边应该要出一多少认识减一是不是，然后怎么办，这个字干嘛，这个字在乘以吧，那我直接就是行。这个乘不就乘到分子上去吗？这能没理解这个是不是拿到。这个是不是就是拿到你每个每个每每个图的度数，那么讲OK，那是不是跟这个S数有关系的，OK，还有一个呢，点top，就是拿他的top。是在哪，那我点的时候它是不是应该出来了。该不该出来了？看身上有没有东西。哎，这什么鬼哦，很明显错了吧，是不是？

没有写单位是不是加PX加PX是不是，而且。应该是一个负值是不是，你看现在是不是都值了，可是正值应该都是王。往里走了吧，是不是为什么，因为你现在我这个容容器是不是在这边，每张图片是不是都在我这个容器里面啊，如果你是正直的话，都都是这样走的，都都都到下面去了吧，而我应该让你走到这边来吧，那是应该都是负值。那负的负的是吧，看一下。出了是不加过渡啊，OK，谁要过度啊。吧是吧，来一个全。先给哥一秒吧，是不是走你？

我去做这个散弹枪。我们是怎么出来的？嗯，对，有延迟的，是不是，我们是不是做了一个散弹枪怎么办。也行，怎么办？这个全身能在这边指定吗？延迟一样吗？每个人的每个人的延迟不一样吧，是不是，那怎么办？也就说这个全身性不能在里面，是不是应该放到这边来指是不是OK，也就是什么image。I点点全三应该等于首先。

过渡时间都一样的，是不是OK，再加个什么延迟时间应该也有秒，是不是OK，那这里面是加个变量是吧，这个变量怎么求啊，习惯好一点，这这边给我敲个空格。啊，因为C里面是需要空格的，懂吧，OK，这边应该怎么想。第一个需要延迟吗？第一个直接出来吧，那我挨上来不就零吗？第一个就零吗？乘以一个。一可不可以啊，这个值你自己控吧。是不是我前一这个延迟大一点吗？来看一下说一下。二四有点一二有点大。反正效果出来了，那给他换小一点呗，0.1嘛，是不是啊，你看第一个。诶，好像有点大啊，不是有点小0.2，这个你自己慢慢调吧。好像还有点大一。

差不多了是不是啊，可是问题是人家出去是赚的呀，咱们出去没赚嘛，是不是，而且我们转圈他得回来吧，你看他还得回来吧，回来其实好写。怎么办？里面是一模一样的clc吗？是不是问题是回来说怎么办，这个知道了。礼貌。礼貌是不是啊，走你看一下。刷一下，首先给我一个出去，回来我的天。他是最后一个先回来了，回来是不是最后一个先回来，颜值是不是这样过，这样改改了说明这个全身要不要再换。要再换吧，是不是，是不是在这个I身上去动动直角，你说这个时候其实第一个它的延时间是最长的，那是把这个I稍微干嘛设计设计设计就行了，是不是我的image点点认识干嘛减I。

还要不要最后一个，我们说S码0234吗。是不是最后一个需要延迟吗？回来的时候最后一个要不要延迟啊是吧，就减一啊你看嘛，我最后一个大看出去的时候第一个没有延迟啊，回来的时候最后一个没有延迟吗？是不是数据没有延迟啊，回来最后一个没有延迟。是不是你看01234嘛，你想想它没有延迟的话是干嘛，应该是四减四啊。是不是啊，那我是不是应该应该是到点一般点认减一再减二。逻辑是这样的，这里没理解啊，是不是啊，OK，来看一下，算一下，第一个出去，最后一个回来，第一个出去的最后一个回来。是不是啊，OK，其实感觉0.1秒差不多。

是不是感觉好一点吧，现在就是出去的时候你得赚嘛。是不是？出去时候转，出去时候怎么转？出去时候怎么转？出去的时候应该是不是这样算。这样转是不是，他是甩出去的吗？被甩出去的话，他应该这样转，怎么转，逆时针转了是不谁要转？每个人都要做吗？是吧，那怎么办？这边应该什么。点全这是干嘛？逆时针要转出去的吧，怎么办？RO负的720度行不行？这个是谁的？这是那个home键，我这里面是每一个一卖懂吗？那这边应该要赚回来吧，是不是咋赚回来。

这你讲好看吗？完美做完了。是不是啊，就差点击它变大了。这个点击它变大，这个效果问你啊，是不是必须的。是必须的，你像我这种现在我用户点完了，他都不知道点哪个的。是不是啊，所以这种效果是干嘛必须给他一个提示啊，你刚刚点点的是这个是不是啊，好，那这个效果我们待会再来做啊，反正这个首先我们说这个效果是不是做完了，是不是OK，把这个做完，这个效果的干嘛思路稍微理一理好吗？OK。