12-尚硅谷-尚优选PC端项目-放大镜移动实现大图元素等比例移动效果

在上次课程当中啊，咱们已经完成了放大镜当中蒙版元素，它的一个移动位置效果。那么本次课程啊，咱们将最后还有一个功能，什么样的功能呢？就是咱们蒙版当中移动的时候，大家不难发现，假设我移动到了右上角的一个区域，好，我移动到了右上角，那它读小图当中的这个位置。是不是堵在人家小图当中的这个位置，对吧？好，我把它等比例放大了之后，假设，诶假设我这个大图片，诶这大图片它在哪了呢？在这个位置。假设它在这，那我是不是也等比例，他挪到哪，那我是不是也得读到哪。对吧，假设是这个位置好，那这块有点不太好想啊，这块有点不太好想，我呢给大家用一个图来进行表示。

打开我的PPT，嗯，我用PPT来给大家进行表示啊，来，在这儿我画一个形状。这个形状呢，我先画咱们的小图框。把这个颜色呀，我给它整成。透明的啊，整成透明的。然后在这个小图框里边啊，咱们需要再画一个蒙版元素。诶，大概这么大，这个蒙版元素呢。浅一点吧。嗯，浅一点啊好。在这个位置我给他标一下啊，我给他标一下。这。嗯，小图框元素。好，那么这个小图框元素里边的这个蒙板，假设同志们，假设我把它移动到了右上角的一个区域。

啊，假设把它移动到了右上角那个区域，好，那么与此同时小图框多大，咱们说大图框是不是跟它同样大小。对吧，大图框跟它同样大小，好，那我呀，把这个元素给它拿过来复制一份，我也放在这儿。这呢，就是咱们的大图框元素。诶，左边是小图框，右边呢是大图框，那你想一想啊，是不是我现在蒙版元素它移动到哪儿，那么我对应在大图框当中的大图片儿，它就跟着移动到哪。也就是说大图片儿的一个位置需要听谁的呀，听你蒙版元素它的一个移动位置。

它们两个之间移动会产生一个什么比例关系？啊，会产生一个比例关系，好，那假设这一块，当然这个有点太细了啊。嗯，看看能不能给它整稍微粗一点，这样吧，嗯，换个颜色啊，假设这个位置是咱们现在蒙版元素，它可以移动的整体的一个距离。诶，我在这再再给你标一下啊。蒙版元素移动的距离，好，我把这个文字给你放在这儿。诶，假设这个画成线的这块是咱们蒙板元素移动它假设走了一步。

给它放底下来。然后呢，把这个字要给它删一下啊，删一下用不了那么多。走一步。好，假设他现在走了一步，闹吧你了。那他现在走一步，那我对应的大图片儿，有可能走一步，有可能走两步，诶基本上也就是在1:1或者是1:2之类的这么一个比例关系，那他俩其实它的比例关系呢，接近于1:2。啊，一会咱们去求的时候你就知道哦，他现在基本上这个值就接近于1:2，那我如果我想要去求咱们大图片。来再换一个颜色，换这个颜色。那么大图片儿元素，它移动的一个距离，是不是我现在画绿色，现在这块。对吧，诶，我现在画绿色线的这个画啊，我把这个呢也给你挪过来。

写好，这个是大图片。嗯，这个是咱们大图片元素可以移动的距离。好，那假设你走了一步，那有可能这个大图片元素我就走几步，有可能我走一步，也有可能我走两步，但具体走多少步，咱们是不是得去求啊？对吧？好，那我问你了，他俩之间到底是1:1还是1:2的关系，是不是目前情况下咱们是可以求出来的。写上移动的比例关系等于什么？是不是我现在蒙板元素，它移动的多少距离比上。咱们。大图片元素移动的一个距离。

哎，其实咱们现在比例关系应该已经看出来了，我这走一步好，那你有可能走一步，也可能走两步。明白呗，诶，也就是说我走的一个距离比上你走的一个距离，我就能知道，哎，你移动了多少，它们之间的一个比例关系，好，那么就这样的一个比例关系，我得挨个求啊。对吧，诶，我得把这个比例咱们得求出来，来找到咱们刚才的一个位置，在这接着来写。移动比等于蒙版元素移动的距离等于大图片儿移动的距离，好，我。Scale元，Scale的一个变量等于蒙版元素来切回来，蒙版元素它走过的距离是不是应该等于什么呀？来，接着往下写，咱们蒙板元素移动的距离是不是恰好应该等于小图框的宽度减去蒙板元素的宽度？

是不是诶，因为你外边这不是400吗？那么你的蒙板元素不是200吗？那我可以移动的距离是不是就是200，因为它占一半啊。是不是它上下方向是不是都占一半对吗？好，当然反之，那咱们大图片。咱们诶元素移动的距离是不是应该等于大图框的宽度减去，哎大图片，哎大图框干不过人家啊，是大图片的一个宽度800乘800减去大图框元素的宽度是不是800减400。对吧，因为你框的话是固定400的，而大图片儿它是固定为800的，所以肯定要拿一个800去减去400。对吧，是这个道理啊好，那咱们对应的，我把这两句话给你拿过来。

打个注释啊，嗯，小图框的宽度好，在这写上，小图框是咱们的small piic点可减去mask div的set啊，具体咱们说元素的咱们算的是可视宽啊，子元素的宽咱们算的是占位宽来除以。大图片啊，Big音妹纸他的offer。然后减去大图框。大图框，咱们的这个词把它往上翻一翻啊，大图框是这是big pic。点好，那么现在这个啊，咱们求完了之后，cancel.log打印一下这个。

打印一下这个变量啊好，那么这个变量打印的时候呢，咱们需要把自己写好的这个页面给它跑起来。在这儿。我鼠标只要进来的时候，你发现它的比例是不是接近于一个1:2的关系，0.495。嗯，0.495好。那现在这个比例关系有了，我想求什么？我想求什么？我是不是想求大图片儿它真正移动的距离？所以如果按照一个数学等式来说它，咱们是不是可以认为是A？等于，诶蒙板元素移动的距离是不是可以认为是B除以谁呀？除以是大图片元素移动的距离，我现在想求谁？我想求的是C，那我问你吧。

那我想求C，那怎么办？是不是就是B除以A呀？AA等于B除以C，我想求C是不是B除以A，因为AC是等于B呀。对吗？嗯，好，这是咱们数学问题哈，数学问题好，那么在这咱们去加一个距离吧。嗯。行，或者咱们就直接给它这样去写也可以啊，就不再去加变量了，那么这个大图片点上still left等于我现在的一个值，呃，蒙板元素移动的距离对吧？Left，然后去除以。嗯，来，别忘了加像素单位，好来，继续top值。等于top去除以盖，但是你别忘了，诶，你别忘了啊，我现在的蒙版元素起点是不是在这儿对吗？我是往右走来。

我这个蒙版元素它是水平从左向右跑，好，那我问你了，那你原来的大图片它假设是在这儿，我是不是得让它往上挪动。或者啊，往上挪动，或者是往下挪动，或者是往左移动，它是不是才能产生对应的一个位置。哎，你说这老师我想不太明白，好，那咱们来看一下啊。假设我现在的蒙板是不是在这儿呢？对吧，我往右推来，你观察图片往哪走。图片是不是往左走，你是不是才能推到对应的一个位置上。你如果你要想往下走，好大图片往相反的这个距离是往下走。哎，所以怎么办？所以这都得加上负号。诶都得加上符号，也就是咱们刚刚说的，你默认是从左往右，但是大图片你想推到对应的位置，它是不是得从这往左推呀。

对吧，诶从右往左推啊，所以这些距离它都是诶负值的一个距离，好了，那咱们来看一下，咱们现在实现完的这个效果是不是可以的呢。诶，当然这个距离写好了之后，咱们如果图片不动的话，大家也不要着急，你得看一看你现在的这个图片，咱们有没有开启绝对定位。嗯，这块咱们来找一下吧，这个是头部开始啊，这个是分类的导航内容区域。是版心路径导航，还有中间对吧，中间左侧，嗯，是在这儿，咱们得给它开启，诶不是这个是大图啊，大图在这儿，咱们还得给它开启一个绝对定位，诶因为你不加绝对定位的话，它默认是不行的，对吧？Left呢为零，然后top也为零，嗯，Top也为零，好来咱们再去刷新一下。

看一下现在图片是不是就可以动了呀。对吗？诶你往右推，那它往左推，你往下走，他往上走。是不是相反方向对不对，嗯，好了，这样的话呢，咱们就将咱们对应啊，放大镜鼠标移动的时候，实现大图和蒙版元素等比例移动的一个效果，咱们就实现完成了。