067-尚硅谷-尚品汇-放大镜结束‘

好嘞，各位同学，咱接着继续。那首先说啊。对于兄弟组建而言，你看啊，我是不是已经把我当前所引数告诉你了？但是他用了。没用，因为你看咱们在这显示的图片，你计算出来这个值永远是。零，那你说接下来怎么搞？接下来怎么搞，比如说你兄弟之间点击是三，他是不是三，你点击的是六，他是不是六，那你是不是得听完这就值。那你咋整？你是不是还得来个小时数据？对不啊，那所以说咱搁这儿也给他来个啥叫啥呀，Date。那这个咱们表叫cart current index初始日记零老师问你啊，你说我现在把这边这个零，我给它换成它现在是不是对。是不是负值，是不是零，但是你要注意这个值能不能变。

能，而且咱们计算属性应该知道，在计算属性当中，你只要用到的详是属性值发表我你会不会重新计算？所以说当兄弟把啥？当兄弟把索引值给我之后，要干啥？是不是修改？当前响应式数据对不对？this.current index等于谁等于index？就这个操作能懂？一定要注意，这不能死，是不是永远是。那所以说来，咱接下来咱看一下走，你看这回对不对。点一下诶。为啥？没点上啊，看这图片是不是换了。走吧，我点的是白的地儿，没点上。对不对。这能不能等？那好嘞。那接下来就是这儿了。放大镜。完了。

放大镜大连血过不？学过咋写？哎，漂亮。其实放大镜而言啊，老师就是想问一件事，你不管怎么操作，咱先不说怎么算啊，我就问你，你鼠标移动是不是这个小滑块跟着动。我问你一定改变这个元素的少。别说坐标left或者T。他呃，套。对不对，你像一个元素可以跟着你鼠标去动，你像这个元素一定是中位的。因为定位的元素才有left和这个套。你左左是不是这个道理，你看嘛，咱咱咱咱找一个，咱找上线的这个你看吧。为了你们，我那天还特地买了个服务器。就这个服务器。哎，我发现这个带项目真费钱。报啥，笑不笑？看啊，这个老师先访问一下，你看你要想明白一件事，啥事呢？就是它能跟着鼠标动，那一定是定位的边，因为定位元素才有life和啥和套。

因为想一个元素能动，咱是不是学过到。就比如说整个定时器让过元素，呃，有动画，你想想是不是一定是定位的元素。对吧，你看咱看看，咱先琢磨琢吧，你看。你对不对，它一定是个定位元素，你就这句话你信不信。一定是定位，一象它能水平动，那一定是改变life。垂直动一定是改变好，而且你发没发现。鼠标的位置永远是在这个。中心。咱先不用看垂直，咱只琢磨什么。水平来就举个举个例子，到这老师问你，比如说鼠标现在放的位置和。因为这个这个滑块，它离不开这个父亲。我就问你这个life能不能算？

Left是从哪到哪？是不是从那个色的边框到左侧那个线这块的距离。对，不能不能算出来。咋算？你是不要当年鼠标的位置。那用的是谁？啊，Cloud是，可是区域的数据是从这儿到这儿的数据。诶，对不对，知道老师在说啥吧。来，老师给你们。这还接不了？呃，说一下子你看就举个例子，假如说你鼠标在在在在这个O，这就比如O这你如果用的是哦，用的是兰X。是不是从这到这。是不是从这到这的数据。对吧，不应该是这样啊，应该是啥。应该是of。X3的X是啥？是你鼠标的位置距离哪？距离这个元素左侧边框这块的数。

对不对。那老师你这块算出来的是left。就从这儿到这儿。不是得解除。减去这个盒子宽度是多少？一半是不是就是？Left。这能懂不？能吧，那你就top，是不是就一样东西。对吧，那所以说来咱下一点啊。咱至少得知道这个事件给谁。所以说这玩意儿是啥。这个是它底下这个大图，我底下这个图就这个一。完了这个啥，这个是咱们写事件的元素。低，我不知道你们以前布局是不是这个样子。以前写放大镜的时候，布局是不是这个样子？是吧，啊，这个一问的是什么，就是咱要放事件的地方，放什么事件老师问。他一入。你只要鼠标一动，它是不是就跟着动，对不，所以说要给他绑定一个啥。

艾特。Mo move。名字叫handle OK吗？完了，就这块，谁这块是放大镜左侧那个大图，这能懂啊？这能懂不懂吧，完了之后你看这这个mask是谁。那个蒙版。就是那个那个蒙板。就是那个遮罩啥呀，罩层就是那个，这是什么色。绿了吧唧的。就这玩意，这能懂不？所以说咱们的事件是绑给谁，是绑给这个div的，你看这人是不是给你标了个一。OK吧，那鼠标异动是不是就触发这个事情，好有这个事情。没有没有怎么办，写吗？咱得找个啥，Methods？来，那这是咱是不是没有呢，再来个啥method。那这个咱就含多，那咱们先看一下对不对。你只要鼠标一动咋的。

他是不是就打印。来。对不对。对吧，哎，那接下来鼠标一动，老师问你，你要干啥。你是不是要让这个蒙板跟着你鼠标动，那老师问你要不要获取这个蒙板的道。要那指定要啊，那蒙满谁是不是一个mask给他打个啥。Ref，别给我打ID好吗？咱这叫mask，所以咱们先获取这个元素。Let，一个mask等于this。点Dollar re fs.mask。对不？那你就借外还干啥？你接下来剩剩下的事，是不是要计算出它的left和top，跟着你鼠标动而动。对不对。那咱刚刚也说了，假如说你鼠标在哪，在O这。那你这个盒子蒙板的中心是不是也在O这儿？那老师问你能不能算出啥？能不能算出left。

就举个例子来再看这个已经成型的这个。你这玩意要想等谁减谁等于left。Lapal。谁演谁？是不是应该是off set X off X是什么？是你鼠标那个位置，是不是M呢？到哪儿到外面带边框那个元素左侧的距对不对。所律对不对？总共咱就学了那几个，Of X of y。配置S，配置y screen s screen y，还有clean s，你不能选择clean s clean s y是到哪到网页的左边跟顶。你是不是要到这个这个这个带带带带这个就这玩意儿不带边框这块的，说你得用谁。SX，但是对吗？不对啊。还得减谁减去这个元素宽度多少一半，是不是就是X？

这能想明白不？能不能能吧，那所以说咱们回到这，你得算一下它的left和和套，就是咱left个啥。Left。Love是个关键字，行，没事，那它应该等于啥？等于even，老师问你这块不写even的行不行？不行，谁告诉你？谁说的？嗯，谁说的？来，你看老师，现在我现在是不是没有新餐机，我直接用，你要要出来，我告诉你是不是看看大脸。来看一下。那当然啊，一般你都要打的。都要写，你不写行不行，行，也就是说这个函数的终于当中，默认它就是有谁的。Even，当然，咱们还给他写好吧，好，那咱给他来赖谁？Life的等于啥？

点of s X减去谁？马斯克的。Offset。White wa。WI。DT吧，除以几除以二。这能想通吗？这能不能想通？给个回音。老师最后再说一下啊，你看吧。哎，不是不是画，为啥画图。就这是你像这是不是相当于最外层的大盒葬？这是不是那小盒子。你现在鼠标在哪，是不是在这儿。我问你，你现在这个元素的life是从哪，是不是射到这？这是不是咱想要算出来的life？那你看你现在的偶X是从哪到哪？从。从这到这。你是不是得减去这个元素宽度的一半？

是不是才等于它的life？这能懂？这个数学能想通吗？那你看那life的知谁也知道了。Light，一个top。它应该等于什么？等于even的点of s全写错了，Of s y减去mask.of s。派D、除以几除以二。对，不但是现在老师你这个元素能动吗。我动不了，因为你没有修改它的什么。Left和top，那所以说再怎么修改什么。修改元素的left与。Top的属性值，那怎么修改？Mask点。带点left等于left对吗？对。倒，我去是不是得加P叉？对，不，以及mask点点top等于加上加P叉。

你看咱现在至少有一个效果，什么效果。它能动，跟着你鼠标动而动，你看。但是。没有约束啥。限制范围好不好限制？好，限制。因为咱们的是不是已经求出来了。对不？Top是不是也求出来了，你是不是得约束咱先约束X老师问你这个life能小于零。如果小于零为多少恒为零，你看嘛，那你这块是不是在用这些式的约束，约束啥约束范围，比如说如果你的left。小于零小于等于零吧，你的life应该等于多少？等于零，你不应该出现负的。是叫做恒为零，这能看懂吗？那你看啊。出不去了嘛，在这边怎么过去。那这面咋判断。

如果你的life，我老实告诉你啊，其实两个蒙板的宽度即为外层那个盒子的啥宽度？OK吗？O，不OK，你大概看是不是这么回事。两个蒙板的宽度即为外头带边框那个盒子的宽度。对，二倍关系，那你说接下来怎么判断。如果你的LA大于一个蒙板的宽度，就应该等于蒙板的宽度，不能再大。这能想通不能吧，所以这块你还得判断判断啥。比如说，如果你的left往那边是不大，大于等于mask.of s。Y是一个模板宽度。那你就应该让你的life的。等于mask.of side white。对不对。所以说咱们看一下，你看是不是这个道理，哎呀妈呀，跑偏了，看这左边是不是OK了，右面。是不是出不去了？我真真出不去了啊。

OK吧，那顶上和底下会不会。顶是不是一样，顶上是不是就是这个top了，来嘛，如果你的top。小于等于零，你的top应该恒为多少？恒为零，那看一下上面是不是出不去。看诶。对不？对吧，那底下呢。是一样的，比如说底下的这块也是一样的，就是如果如果啥top。大于等于一个蒙版的of outside，谁hi，那你应该那就是like top应该等于谁mask of side head。那不也是一样，也是二倍的关系，所以你看走是不是就出不去了。但是完事了。没有谁没变了。这个大。OK吗？就这个大图。大图该怎么？那老师你大图你是不是也得改改它的left和tall？

那这个元素要不要获取，要是不是也得给它打个上ref。等于啥，咱就叫。Big OK吗？那这块你是不是也得获取到？Z，啊，不对，Let，一个big等于this.dollar res.big那你是不是也得改变它的life talk？咋整，咱们得看一下。样式你看。啊，对，两倍关系，当年这个布局写过吧。看吧。咱那个大图下这个一位置，你看是不是200乘200是是不是二倍关系，虽然你style在负的时候往那边整是不是负。应该负几倍？负两倍的和负两倍的啥。这个以前学过吧。学过吧，那这是不是两倍关系对吧？所以这块呢，你的left和top应该是负的，二倍的关系应该是big的style.left等于负的。

二。什么二乘二乘以left加谁P叉以及底下这B点到点top等于负二。乘以top加谁加P叉是二倍关系，而且是负。那所以说你这回再看一下走放大镜是不是就。完事了，看一下。没完事儿。看一下啊，是报错了。Big。RB。少了个字。对不？所以你看这回这个放大镜是不是就OK了。但咱班这个网吧。是不是就OK了？这回再回头看这个放大镜，有没有点感觉？能理解不？有点印象啊，你们这帮上来游戏的。

OK吧，啊好嘞，老师也听一下。