54.尚硅谷_jQuery_应用_放大镜效果2.avi原创

挺好啊。先考试再放假嘛。好，来，我们还是回到上午我们写的东西啊。这个先先给他删了吧。他中午的时候估计也想吃饭了没。来回头看一下，呃，上午呢，我们分析了一下我们那个页面，我把那个已经做好的了，先打开一下啊，看到效果做。这个是我们的。亲情。嗯。骡子。出了。啊。就这的这个效果啊，我把我们的自己的也打开一下，这是最终的我们自己的练习练习四。

把他的这个关了啊，免得等会搞错了。这我们的我们还没有效果，嗯，刚才删掉好，那我们这个效果呢，其实分为两个部分，一个是这一个。叫什么遮罩的这一个黄块的一个运动是吧，再一个呢，就是右边的大图变的效果，我们先把左边的这一个，左边的这一个遮罩的小方块的效果给它做了，再做右边的。啊，我们先呢，把所有需要操作的一些元素给它获取到了，那下面呢，一上来就要去给某个元素加监听，刚才分析过来要加什么监听，一个是先移入的时候是不是要显示黄块啊，移出的时候要隐藏，还有一个移动的时候，它是不是跟着我的鼠标移动啊，其实一共是三个监听啊，一个是猫是摁是吧，接着是Mo，接着是什么Mo live，那Mo leave和Mo可以合并成什么？

Ho，那给谁加ho了？是给mask还是给mask top mask top对吧？好，没问题，给他去加一个什么。Power。好后里面我们说要干嘛去。要将它显示，那你点什么秀？那我要离开了。那我就会了，对吧？啊，先把这个做了，我们看行不行。

现在显示了吧，啊，我还没离开呢啊，离开视隐藏了，好下一步我们要做的事情是他要跟着我的鼠标移动我的鼠标啊，要移动到某一个位置，譬如说移动到这个位置是吧，那它是不是跟着我动好跟着我动，那我需要去给他加什么佣金呢？鼠标鼠标移动的接听，那我但是我没有必要在外面加，能理解不？我应该在哪个里面加，我是不是在后里面动态加，能不懂进去以后才去加吗？可以吧，可以来啊，这是鼠标移动的阶梯，这一个非常关键啊。好，来试一试，也就是我们的马SK top Mo。是这个吧，等不等于等于干嘛啊啊，猫又写错了啊，不好意思叫Mo move，嗯，好，来一个function，此时我需要定义个什么样的参数，Event？

对不对，我为什么的。去定义一，我需要取到一的什么坐标对不对，也就是说你想想看，也就是说我最终我的黄块的移动跟坐跟那个事件的坐标有没有关系。很有关系，他不刚好我的那个鼠标，我那个鼠标是不刚好在这个方块的正中间呢。对不对，好。那现在也就是说我们此时要做什么事情去？

是不是要给我的这个mask进行重新定位，对不对，能不懂重新什么定位，我要想重新定位，实际上要调用它的什么方法。CSS吗？实际上去更新它的什么样的CSS呢？其实非常简单，一个let对吧，一个什么pop。只是说我们要提前先将life的值和什么top值是不是计算出来啊，OK。计算left和什么错，我们先来一个，先让等于零再说啊，先定义好啊。但是我们要想，这两个值该怎么算呢？嗯，这两个值该怎么算好，现在你就要假设我的光标，我的鼠标已经在这里了，是不是黄块，应该是不是移到这里，大概这个样子吧，好吧，可以对不对，那你想啊，现在。

啊，是不是要求这个值。对不对，它的值应该是个正值吧，这一个值对不对，是不是求这个值能不能看懂啊啊来，那这一个值怎么算呢？你就来看呢，是数我们的事件的坐标减去什么它的自身尺寸的一半就行，无论是X方向还是Y轴方向是不是都一样，那这里面我们先要找到两个东西，一个是事件的坐标，一个是我的黄块的一个什么尺寸，这个黄块的尺寸一在我事件发生之前，我提前就可以，什么是不是给它准备好懂不懂，也就说我上来能不能取到mask wide。

各位可以非常简单点，什么很简单，一个是接着mask hit等于等什么，嘿，知道吧，这个这两个是不是相当于是黄块的一个尺寸，能题吧？好，那在动态的我要提前获取好什么事件的坐标能理解吧，这个事件坐标我们前面说过，事件坐标有好几种呢。有好几个，一个叫off set X，这是什么？原点在是不是发生事件元素的左上角。也就是我这个图片左上角吧，对不对，那还有什么，还有一个叫什么叫叫什么client X相当于谁是相当于窗口的左上角，是四口的左上角，好还有一个什么page X，那我应该用哪个呢？因为我看的原点是不是就是它呀。

对不对，很好，那非常简单，就是。Maxon。对吧，来这一个实际上啊，我们还是把它取一个概念叫来可以吧，这看清楚点，再一个疑问着什么拓。等于点of y，刚才说过了，我们是不是要去计算这两个值？怎么算呢？等于。

等于什么？刚刚说过了，等于什么？等于我们的left减去我的什么mask的什么一。能求吧，这个要能求啊，好了，在下面是不是类似的even top减去mask hit除以二。看着吧，嗯，这个是比较简单的。好，我们来看一下我们的这个能不能动。可不可以动，可以，但是是有有点是不是这为什么呀，这很多人就应该这样的嘛，除非数据出去它就消失了呀，我们现在是完全按照绝对的算法，我一直话就是一直在我的鼠标的正中间，是不是我鼠标是不是在正中间，但是有的时候我们说过了，是不是要限制，也就是说什么意思呢？我的left值是在什么区间，要在什么区间，零最小值是零，不能比这个小，零到什么发是零到什么了。

零到这里就这不能再动了，是不是？那现在此时我的F的值是多少了？是不是我图片的宽度减去我的什么？是不黄块的宽度能不能懂，那也就是说我们还需要一个尺寸，谁的知道呢，这个MAS top的尺寸。对，不能，不能理解它的尺寸能不能得能怎么办？就它点什么Y的它的尺寸时，是不是就是我的图片的尺寸呢？啊一个意思等于。

Mask top宝有人看到吧，那有了它以后，也就是说我的范围在哪个范围呢？它减去我的mask什么是不是，那我的这个拓是不是也有一定的范围，对不对，零到什么呢。Mask top hit减去mask hit是吧？下面我是不是要做一些限制啊？什么意思？If，如果life小于了零，那life应该等于多少呢？它不就等于零吗？

不能比他还小了吧，啊，下面else什么left大于了我的马SKY的四就上面呢减去啊，不是写错了马SK top是吧？把这个拿过来吧，这写了。大于了这个值，那我们应该怎么办呢？那不就等于他呗。是不拉回来啊，他要出去是不是就不拉回来啊？OK，不能让他出去。下面的搞法是不是一个意思，If top小于零，那我就让top等于零，好把这个复制一下啊，非常简单一件事啊。接着top大于了它，那我就让top什么等于它。OK了吧，OK，来试试。

搞新思路很关键啊。看可不可以。是不是可以啊，挺过瘾啊，可以。那我们左边的这个效果就做好了，其实像这种啊，限制一个，限制一些坐标的一个范围，这种效果是经常做的。啊，经常有可能做到啊，怎么样限制，在限制之前，你一定要分析清楚它这个值应该在哪个范围。能理解吧？嗯，好，那搞定这个事以后，下面我们要说的是另外一个，另外一个部分呢，除了做它，我们还做什么来着，是不是还要将大图动态显示出来，对不对，那我们是不是动态加载大图，所说的动态加载大图实际上是干嘛去了，实际上是要给我的这一个。

给我这一个大家看到啊，这里面的这一个image要指定图片，最先的时候大家看一下，最先的时候你看它有有SC吗？有没有没有，那是不是我要动态进去。能懂吧，什么时候我去加载啊。啊，我是跟大家说一下啊，我是那个鼠标一放进去啊，记住了，我这个鼠标一放进去就去就采取什么呢？加载什么大图能懂不就是加载大图，那也就是说啊大家看到。除了这一片啊，这一片啊，做完了以后啊，做完以后我们还需要做一个东西。干嘛去叫动态加载对应的什么大图。

既然是对应的嘛，那我需要去找到对应大图的什么src是吧？那它的src在哪呢？怎么找？首先我得找到中途的是吧，Src属性这个能找吧。先找到它的点什么S什么。行还是不行？还是不知道。行不行？打啥呢？不行不行啊，现在世界块的对象，它必须通过a drr方式才能去取那个什么属性，对吧，拿到这个属性后，我们要能看得出来那个大图和中图它们之间的那个对应关系，这是一个。

中途的地址。对吧，它对应大图的例子。是这样子的。能不能看到啊，只是应该是这样的，应该这样，对对吧，如果同一张图片的话，能不能懂好了，其实非常简单的，就是把杠M改成什么杠L，那怎么办。Replace对吧，接着呢，杠M变成啊杠什么L，你加点也行啊，你比如说这里加个点行不行。今天。就一个意思啊，你搞成GB是不是也可以。这可以吧，可以啊啊，那我加个点吧，免得跟跟别的匹配了，加点加一加，这没关系。是。

好OK了吧，OK，那OK了以后，那下面我要做的事情是把这一个src设置到我的什么。上哪去？是不是大图上面去。能不能理解设置到大图上面去啊，设置到大图上面去点什么at tr是吧，来一个啊什么src，再来一个src。好啦。那射进去就好了吗？看一下呗。海洋走出来了吗？没有没有，我们还要去看一下，到底那个src到底加进去没有，对不对，好。打开它家具没有。

有没有图片，有，但显示没有，没有，为什么没显示？那个得看样式了，肯定是样式上面有问题，对不对，这意思吧，样式上面肯定会有一定的问题，那有什么问题我们得看了，对吧？好，这个时候实际上很简单，应该是啊，这个里面有隐藏的，你看这个display等于什么，那我们来看一下它，它的display还也为什么。也没让不对啊是吧，能等吧，你那不隐藏了吗。能理解吧，能理解，而且我们要知道加载大图是不是要一定的时间的。而且我们是不是还要去取那个图片的尺寸。是不是啊，怎么取到了。这个都是个难题。你说我让它显示让让他搞出来很简单，大家看到我们让它显示出来啊，试一下，我们先让那个垃圾看看了它是不是隐藏了，本来他的什么秀，接着让那个什么，那image也什么秀，他不隐也隐藏了吗？

看看。有没有效果啊走。哎，现在谁显示了。有没有？看到这里看到了吗？有没有有只是我这个图片是不是很大呀。啊，那个这这个这个lo是不是也出来了，Lo说明它默认是隐默认显示的，我其实没有去没有去操作它显示吧，说白它默认是什么，是不是开始显示的啊显示的好。那关键的一个问题啊，这里面非常关键的问题就是我怎么，我要不要去读这个图片的尺寸，需不需要，还记不记得我们要做一件事情，做件事情就是我在我的这个黄块移动的时候，是不是这个图片也要看，也要移动啊，那图片移动的那个坐标跟我跟我的这个图跟跟他的这个尺寸尺寸有没有关系，有我们刚刚不前面不研究过吗？关键是怎么样去得到图片的尺寸的。

也就是说我现在马上去取图片的尺寸行不行？我就点Y的，你说这样行不行，这样不行，因为你要知道我这么一设置。啊，我这么一设置啊，我去去取大家看看我打印输出去好吧。我打印输出一下，把那个他的hit也输出一下，可不好可以好，接着呢，我再做一件事情，再做一件事情，我清理一下缓存。

嗯。啊，清理完了，清理完了是吧，那清理完了以后呢，接着我去先刷一下是吧，现在有没有这的图片。有没有有没有加载大图没有，我们说大图在什么时候加载，是不是鼠标移动的时候加载走你诶。感觉像死了似的。算了吧，好，我们来看一下那个打印输出。开始有字吗？有没有没有，为什么没有啊，前面跟前面我跟大家说过，这个东西开始设置，你在图片没加载到之前是得不到值啊，那我怎么知道图片加载完的呢？还记得我前面跟他整过是不是怎么样监视图片加载完了是不是给这一个image，给这一个给它加一个node的阶听，还记得吧啊要要记得才行啊，也就是说一为什么事情呢，大家看着啊，我们设置了它把这个显示出来，这个可以先不做，先暂时不做啊，先暂时不做，我们去做一件事情，出现什么事了，我搞一个那image.on是不绑定监听句绑定它是什么监听，No的监听，接着来一个什么方。

是不是？啊，那也就是说我此时说白了这个函数标的时候说白了什么意思，图大图什么是不是加载完成对不对，大图加载完成，我此时去取取寸能不能取到。肯定能，那此时我是不是再去，哎，我现在啊去显示一下它行不行，可以吧，啊可以我先解释啊，再去取吧，我们看一下看行不行啊，看能不能取到这一个尺寸，如果能其实后面是好办的啊，后面是挺好办的。

好来我还是一样啊，先刷新一下，接着呢去把那个缓存。还是要把换成得洗掉啊。因为不清掉，有的时候他这个得到的数据就是有值的。好，下面来试一下啊。把它清理掉啊，走右边吃。这有我的天哪。这个多少，2144字这么多呀。这。来，我们现在是搞的那个什么。

猫是木里面去做的，是不是对吧，这个有点问题啊，能不能懂啊，这个地方我们应该在什么时候去加载。这一个值。加载动态加载大图，我们说我的鼠标一进来是不是就加载，你要是貌似物理讲那就崩掉了，有那必要吗？非常没有对不对，我是不是加载一次就行。能不能懂啊好，还有一个事情这一个。这个你想想看啊，这个东西其实最好的方式应该把它放哪去了。放到这个里面。啊，我在移动的时候，我在移动的时候，我去我去做一个事情啊，我能不能把他们。

放在这个里面。大家看啊，怎么一个意思就说白了啊，说白了就是我先是啊，大家看呢先我和是不是进入这是金录吧，这是记录，记录我干嘛去。叫什么是不是加载大图对不对，接着我给绑定什么加载完成的干嘛监听是不是那监听啊这个，那这个回的函数说明什么，大图加载完成，大图加载完成以后我才去加这个有问题吗。这你要想啊，你你就说白了这个意思就是我加载大图以后，我你移动，我才跟着你动，这个时候我右边才会有效果，也就大图没有加载完之前，你动来动去，我这右边会不会有效果，不会，那我就直接把它干在这里面得了。

啊，就把它做在这里面，那做在里面代码是一样写啊，代码没有没有区别知道吧，没有任何区别，是就是我加了一个木啊是没有关系的下面。啊，此时呢，接着我去做这个事情，做这个事情呢，下面我干嘛去。大概呢，我把它显示出来，这个图片大图显示出来没有。我这调弦出来没有显出来，那显示出来了以后，下一步做什么呢。下一步我写出来，下一步是不是想办法让它动啊，是不是，而且我一旦显示出来这个要不要隐藏。要不要要隐藏，这个很简单，也就是说它显示的同时谁要隐藏我的那个就是叫loading。

要点什么？对的，你的加载出来了吗？对不对，好了，那下面我怎么让它动呢。我需要在在哪做才能让它动啊，大家说我去在哪让他移动，我是不是在木的时候让他移动啊，能不能懂前面这一片的计算是为了让谁移动。小黄块进行移动，也就是说我们这个在猫live的时候，猫的时候需要整体做两件事情，第一件事情移动什么小黄块。啊，OK，对不对，再一个是什么移动什么大图对不对，好移动小方块移动大图没问题，那下面小黄块移动是不是搞定了，下面我要移动什么大图。

好，那就说前面这一片都是移动小方块的，就是第一个事情移动小方块啊，我这么这么表现吧。错了再表演诶。这标价下面我要干嘛去移动大图在后面做呗。是不是，那移动大图怎么做呢？看看怎么做。首先啊，我们我们刚才说了移动大图是不是要让那个大图设置它新的什么CSS，设置它的什么值。它的life的值和什么值？对不对的，好了，那设置它的那个，我能不能利用那个变量。

可不可以利用？诶，那得了什么top，我就利用那个变量得了，那也就是说我们要想办法再去计算新的life得什么top，这个奈的top真的谁的是不是大图的好，那大图的那个life的值是怎么算的呢？其实跟我当前那也没有关系。有没有是一个比例关系？对不对，它要乘以多少倍。能懂吧，多少倍了？那我先得得到什么，那个大图的一些什么尺寸数据，对不对啊，OK，此时我要得到什么动态得到大图的尺寸。大部分不就是宽高吗？叫large，刚才算过对不对，不就他吗。

是不是？能理解吧，还有一个什么。爹。配置A就是小写的，不能大小。是吧，好这一个是什么。其实事情很好办，如果是的值，就当前纳几的宽度除以什么中途吧，是不是那个medium，我那中途的宽度有吗？看一下我中途的宽度有没有？中的是不叫他。对不对，因为它跟那个中途的那个区域是重合的嘛。对不对啊，这个理解啊，好，那我就是用它来去除，放到这里来啊。

对吧，好了够了吧，那还有一个还有什么。Top等于当前top乘以。垃圾。除以mask top，但是你要知道这个值永远为负。不可能为证。你就想嘛，当前默认是一个零吧，当前它的那是top是零，是不是零的时候，是不是看到的是左上角，我现在看看到其他位置，我必然是要向左上方移动吧。对不对，那左上方移动它的这个level的值top是B，然，为什么。负，无论是life的值还是top值必然，为什么？负的有没有问题？没什么。嗯。

OK。那那也就是说先把这个先把这个新的life再特别算出来以后就可以了啊，得到它的尺寸，这一个是得到大图的什么是不是坐标。接着设置坐标，就这么个事啊，OK，设置大图的坐标，嗯，就实现了我们大图的移动，看一看啊，能不能。啊。行不行？好，应该还还会有一件事情要做啊，还会有一些事情要做什么事情呢？大概差不多了吧，看到吧，还有一个事情需要去做什么事情呢？就是我这个容器的宽高尺寸，我这个容器的尺寸。也就是谁的尺寸呢，大家看啊。

大头的容器。我们不就是大幅的容器，不就是这个SPA吗？能懂吗？这个SPA的尺寸是怎么来的？还记得不？这个尺寸应该设置为什么样的一个尺寸呢？啊，我们看到，我们看到大数据一次只能必须看到多少，看到1/4。能不懂啊，看到四字形的宽度是一半，高度什么高度也是一半，能不懂？能理解吧，啊，那怎么做呢？这个怎么做，就是说我要去给谁呢？给我的这一个这一个去设置一下什么。尺寸能不能理解，给他设置一下尺寸，这个好设置啊。呃，我们在哪设置，关键是啊，大家看一看啊，我们没有必要在目里面设置，没有必要在目每次都设置，没必要他只要去获取了就有值了啊关键这个值我们刚才去取那个宽高是不是在木里面取了。

这个都没必要。能不能懂，没有必要在木里面去取，木里面取是不是取啊，是不是老去读啊，这个是应该放哪呀。这个事情是不是在上面，我一旦按了以后。是不是就可以。是不是啊，我们可以把这个事情搬到上面来吧，通通都搬到上来得了。啊，通通都包到上面来可以吧，那同时我们有了这一个尺寸以后，我们应该给谁去设置尺寸呢。啊，给这个东西设置寸，来，我来说一下，给它设置尺寸，它实际上是我大的容器。

对不对，设置尺寸怎么设置，设置的非常简单点什么CSS它的Y的。尺寸嘛，不是设置Y的是黑嘛，是多少。非常简单，就是大头的什么。1/2对不对，还有一个对。高度的什么1/2。既然我是让我的，这是干嘛？是不是显示大图。对不对，显示大图，而这个是什么，那么隐藏啊，隐藏是不是加载进度。加载进度条。能懂吧？啊，OK，接着我再去监视鼠标的移动，最终是不是来显示不同区域。

啊OK，好，现在我们来大概来看一下，看看呢，是不是这样的。啊，还有一些问题啊，还有一些问题，我们等会先看一下系统的效果，因为做的挺多了。啊OK，大家看看现在我这个尺寸是不是开始的高度就高了，刚开始默认的默认的是不是就跟这个宽度差只有这么高。能看到吗？看到大概是这个样子，现在是不是变变得比以前更高了，为什么？是算出来的，能不能懂也是，这个东西到底有多高，到底有多宽，是根据图片动态算出来的。能懂吧，啊动态去算出来的OK，好，那下面诶这东西怎么不是不好啊。是一出去的时候要干嘛呀，是不是要隐藏啊，说白了就是这个里面把那个把那两个什么多了服，那你contain了给他什么隐藏，把那个图片给隐藏。

点他点什么。隐藏一下不就得了吗？看一下。看到啊，OK。这出来了吧，出来以后呢，接着下一步啊，下一步我就是移开有没有。可以。可以吧，啊可以没问题啊，行的对吧。这样我就能看到整张图片的各个区域了。觉得不是。啊，其实你的这个木放到我，我把它，我把它放到外面有没有问题。其实也可以啊，这个没什么太大的影响啊，你说放到外面其实也没有什么太大影响啊。

这个地方木一共做两件事情，一个是移动小方块，一个是移动什么大图，这个应该是这个里面最复杂的一个。这下一周呢，大家重点需要去把啊后面啊这个功能和这个功能。给他做出来。OK。你三天时间。放假你坐一天不行啊，可以吧，可以做一天还是可以的啊啊，你玩多了也没意思，有什么好玩的呀。