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

好，我们来看一下最后一个功能是什么呢？就是这个放大镜的效果啊，它的专业素质叫放大镜，这个放大镜的效果，这个效果呢，其实是分为两个效果，一个左边的这一个遮盖，一个效果，能懂吧，这个半半透明的遮盖，这个半透明的遮个啊，一个是它跟着你的鼠标走，你的鼠标走到哪它就走到哪，对不对，而且正常情况下面，你的鼠标是在那个遮盖的正中间。是不是，但是呢，这个遮罩了，他也不可能跑出什么。这个中途的这个范围，这个图片这个范围对不对，那一旦那那我的这个我的这个鼠标一定是在我的这个遮罩的正中间吗。不一定，因为它跑不出这个图片的范围，所以说你再向向左移还能移吗？不能移，那你的，那你这个就没有在这个正中间了吧，能懂吧，好，当我一移出的时候，我的遮罩就什么是不是消失啊，是分为左侧的这个遮皱的效果，以及右边的这一个。

大幅的效果。这个大图是被是被放大了吗？不是，它只是啊，框住了这个大图的1/4的部分，看到了吗。多大了吗？看看啊。啊OK，就是能他就只让你看到了那个图片的1/4的部分，另外的部分其实也有啊，图片并没有放大，它本来这个大图呢，相当于啊，比如这样吧，这样的话，它那个图片是一个什么情况呢？这个位置空间不够啊。认懂吧，它实际上我这上面空间就不够了，这是右边的一，右边的一半看到吧，下面还有一个，下面还有一个。

是吧，啊是这样的一个情况。那我怎么看到别的部分呢？我怎么看到看到其他的位置啊。像那个东西给移动啊。整个整个外围啊，假设我就看到这个中间的部分，说白了简单来说，可不可以将图片移动，可不可以给它指定life的值和top值，是不是就让它动起来了，你就看到了，是不是其中的某一部分呢？那不懂啊，外部的这一个容器是固定在这个位置啊，固定的位置我然那个图片动起来。你不就看到图片其他位置了吗？大概能理解啊，啊，就是这个外面是一个容器，里面是一个image标签，如果我的image要有一点偏移，大家想啊，譬如说啊，我要想看到那个右侧右下角那个我是不是相当于我的图片已经在这来了，因为空间不够我所以不不是完全的对称了，是不是它要它的坐标跑到这来了左上角对不对啊，对的。

关键的一个问题就是怎么样对应的显示啊，你看你看我看着啊，他怎么就刚好知道我要显示这一部分呢。是不是这就是，其实写代码倒没什么，那就那么一两行语句就搞定了，就是你能不能分析出来他们是怎么对应起来的。怎么怎么他就知道我的遮罩遮在这一部分呢？是不是首先得说我们这两大图还是中图，样子是一样的，只是那个尺寸大小不一样，对不对，听懂不，样子是一样的，比例也一样，只是这个尺寸不太一样啊，我这个我这个是有个坐标哦。

有没有坐标，有没有我有了这个坐标，大家想啊，我的这个图片是不是应该向哪边移动，是不是向左上角移动，你你不然的话，你怎么能看到图片这个位置这个部分呢？那关键是这个坐标多少呢？我移到这来，这个坐标是多少呢？跟这个跟这个是不是有一个倍数关系，首先得是个负值，它是个负值对不对，是值是不是个比例关系，那比例到底是看那比例怎么来的呢？关键就是这个比例怎么来的，对，其实很简单，就看这两个图片的尺寸的比例，那种看图片尺寸比例就行。啊，其实想明白了都是非常简单，但是在没想不知道之前，那你其实说实话还是很难想。

好，我们上午呢，我们上午只做这只做左侧怎么样，它动起来怎么样，左侧的这个遮罩跟着你鼠标移动，好我们来看一下元素。看元素结构啊，这个元素倒是并不算特别难，我们来看一下，首先这里面有一个有一个总体的一个什么呢？容器，一个整个图片的容器，接着它有一个这是那个什么，是什么东西。哪个图是中图还是大图，这是那个中途medium看到吗？是那个中图啊，下面这一个呢。下面这一个就是那个小黄块，也就是那个什么是那个什么，就是那个遮罩，能不懂这个瓣就是这个遮罩，而下面这一个石瓣呢，其实这个可有可无的，说实话，你看这个是这个石瓣的宽高是跟谁的宽高一致啊。

是不是跟图片的中途图片宽高一致，是不是啊，我们到时候是不是有一个鼠标的移入移出的事件。有没有鼠标要移入移出要响应嘛，你看我移入和移出它是不是消失了隐藏啊啊，那我把事件呢，加在了这个SPA上面，其实完全可以不用，我可以加在这个，加在这个image上面也行是吧，其实这个image的位置跟那个SPA的位置是什么完全什么重合的，能懂不完全重合的好，下面这一个是什么呢。是那个大图的容器，而大图容器里面它其实有两张图片，一张是我最终显示的一个大图，但是这个大图是不是动态加载的啊，动态加载的好，这个是什么回答啊，来看一下。

这是干嘛的哟，知道这个是什么东西吗？这是一个代表正在加载中，大家知道啊，我们真正访问那个大图是不是在服务器端，它加载是不是要一定的时间，那在这个获取的过程中，我应该让用户感觉好一点，怎么感觉好一点就是啊显示一个旋转的一个一个图片，一个GIF，是不是叫他，哎，我正在加载中，能懂不能不能理解，这样的话是不是效果更好，有人说老师我怎么没看见呢？主要是我们这个太快了，我们都在本地知道吧，我们的服务器也在本地啊，瞬间就加载进来了，能不能理解啊，OK，等会我可以让大家看到这个图片啊，不着急啊，网速慢的时候就可以，但是我们这个没法网速慢了，这本地怎么网速慢。

啊，等会我会让大家看到这个效果啊，不着急。好，嗯，其实这个里面啊，有好几个元素需要我们，首先我们的事件加在谁身上呢？事件我这地方我加在这个上上了。啊，其实也可以加在这个图片上面，因为他们俩是什么重合的，加的是什么事件是whole，相当于就是对吧，就和我我要去操作哪些呢？我要不要操作它。要我要读他的SC。我只有读了他的src我才能去整大图啊，其实大图就是你看呢，跟他的区别在哪里哦。看得出来距别吗？它就是多了一个杠，什么L看到了吗？多了一个杠L什么意思啊，那大图的意思大的意思对不对啊，我要去读它的src，所以我这个image是不是要也要去定义一下啊，下面这一个要不要操作？

要不要这个是那个小黄块，也就是那个遮罩，要不要，那肯定要啊，这个是操作最厉害的，我们是不是要给它定义坐标啊，定义level的值和什么top值，还要控制它的显示和什么隐藏。试一试吧，好，那下面呢，这个是啊，一个它的那个整个的容器，就是我们那个图片容器。这个图片的这个容器，它的宽高只有什么呢？大家看呢，400乘400。啊，这个400乘400呢，其实是一个是一个，到时候我们会动态计算的一个值。这个值我们是怎么来的，跟大家说一下，简单说一下，我们到时候是不是加载一个非常大的图片，而我们的那个容器只会是它的什么，1/4的部分比宽度是一半高度是吗？一半能不懂，这样的话，你不就只能看到那个那个整个图片的一部分吗？比如说老师为什么不让他小看见呢？你非常大的图片，你根本就你想想看那个那个放大镜的效果怎么做的，他就是是不是只让你看到一部分，也就是说为什么看到全部，看到全部一有可能你不能完全看见，能不懂，那个大图是不是有可能很大的呀？啊，有可能很大的啊，OK，看到1/4的部分基本上就能看得见了。

好，那这个呢是需要去操作的，因为我要给它指定宽高啊，好，还有一个啊，我们要去控制它的显示异常。控制它的显示隐上，因为在加载的加载大图的过程中，我是不是把它显示出来，提示正在加载中嘛，那它要不要去操作呢？那肯定要我们要去显示这张图片，并且去移动这张图片，你看它有什么life的值和什么top值，看到吧，Life的值和top值啊，而他的life的值和top值跟谁的life的top值有关联，跟那个跟不是跟我们这一个小黄块的它的life值和top值有关系，对不对，还跟什么有关系，跟那个大图跟中图之间的什么尺寸的比例有关系。

大概能懂吧，行，那大概能懂以后呢，下面我们就要去操作了啊去操作了，那首先呢，我还是去截个图啊。来这个时候呢，我们就写在这呗，写这个啊够了，就是这个P好给他啦，保存一下啊，刚才还没保存过吗。

好，我们来看一下就在这里是吧，好，我们首先还是按照我们固定的套路，对哪个元素加什么监听是吧，这个比较简单，我们现在是不是对它。对这一个加监听是吧，那加什么监听呢？很简单，什么后对不对，好对他加后行，那加了后以后啊，下面我们要去操作的元素，操作元素还挺多的，说实话啊，这一次操作的元素比较多，来看一下哪些呢？首先是这一个image。要读它的SC啊，这个SPA这个小黄块要去显示隐藏，要去指定它的life值和什么top值啊，那好了，还要去操作它。

这个也涉及到什么，你看低配的意思嘛，那也要显示以长，也要控制它的什么宽和它的什么高，这个也要啊，这个也要。其实这里面呢，操作比较集中，挺多的，好操作他的什么？首先我们这里面要读它的src啊，要去操作它的style，这些样式都需要操作啊，接着呢，我们需要去操作这个style，基本上是style比居多啊，这个还有这个，还有这个C，好像基本上都操作完了，快啊，挺多的，好现在呢，我们把它转换代码来试一试啊，天，这里面好像时间不够了是吧。

我把这个稍微把它给搞起来一下，呃，写一个叫什么名字，韩总名叫啊big image大图是吧，来来一个方线。对吧，好，我们来去做一个事情啊，需要去把所有我们现在就是把所有需要操作的元素都给他什么定义成变量，因为多嘛，啊统一定义会比较好一点。啊，一个多福medium image，这是那个什么，是不是中途啊，啊medium image啊还有什么，它下面呢，有一个SPA叫什么mask，那个mask是那个什么小黄块mask，嗯，多了一个K，它都是ID啊，都有ID叫mask，就这个好，还有我们那个这啊这个是我们能知道，接着是我们那个啊背景下面的背景叫马斯克拓，等于它也是个ID那所以我们叫马S克top好，还有。

往下看，再有我们这个大图的容器大图的容器大图large image容器container这个吧，诶没问题，接着是把它的写一下叫垃圾。Image content，还有那个我们的这一个loading啊，Loading来一个多瑙福lo，我这么写的ad lo是吧，等于lo，嗯，再来一个啊，后面还有一个叫垃圾。

It。好，这个稍微改一改啊，它应该有提示差不多了吧，好差不多吧，我要给谁去加什么监听呢？给什么是这个小黄块啊啊记住了，这是就是那个小黄块遮照。嗯，小黄怪，嗯，好，来给它加一个怎么决定和我来一个方写，再来一个什么方写对吧？好，我一进来以后，我做过什么事情。

啊不，我是要去给他加精力嘛，是吧，是给这个给他加鉴定吗？不是，我们最终是要显示这个小方块吧，事件并不是加到哈身上的吧？啊，别搞错了啊，是给这个ma什么错，我要将它显示很好办，显示怎么说。就先显示再说呗，先显示再定位，先别着急，是不是先显示再定位，看看能不能显示再说，一点一点做，因为这个有点小麻烦，所以呢一点一点做来看一下。放进去出来没有出来了，但它默认是在左上角，那我的鼠标移动它会动吗？不会，那我现在要想让他动呢。标对吧，这个时候是不是要根据我的鼠标even的事件的坐标来去进行计算，嗯，那我首先得看看什么even它啊光显示不行对吧，显示小方块这个不够啊，同时要去给它指定什么，最终我们是要给它指定life的值，什么top值，那也就是说我们最终要去调它的什么CSS，去指定它的什么life的值和它的什么top值，只是我们要把这个值给它什么是不是计算出来，那也就是说下面我们要想办法去干嘛呢？计算出啊小黄块的什么。

Life的值和什么值，而且关键是这个这个函数它会反复的掉吗？大家在想啊，会反复掉吗？我在移动过程中，它掉不掉啊，掉不掉，掉还是不掉，根本就不掉，你光是你就是即使这边它这个不掉知道吧，那也就是说我们同时还要监听什么事件，刚才我们少分析了一个，有一个很重要的事件叫什么mouse move Mo move什么意思，鼠标什么移动，一旦进来显示以后，我马上，诶这一个很关键，不能掉了，这个是是吧，绑定什么事呀，什么接听猫是木接听是不是意思能不能理解，能理解好了。

来，我们来去绑定一下猫怎么绑定啊是吧，那给谁绑定猫经理得要给谁是给给是给谁给他吗。

还是给我们的这个吧，好吧，还是给我们的moco去保利来点什么点帽子，什么木方线，哎，木里面穿什么方线，也就是说我拿这个一文的一嘛，不能要这个，这个一点用都没有，我们要看的是目的，什么event对不对，也就说这些事情我们等于什么。放在里面的这个方形做对还是不对，对的吧。也就是这个意味着是不是不断在变，也就这一个方体是不是不断在调，在移动过程中反复什么，在移动过程中被什么反复调用，对不对？那下面我要去计算出当前小黄克的life的top值，接着是不是给它设置一个好，关键是怎么算呢？这就是一个麻烦的事啊，我先写个零好吧，先写个除值，这个咋算呢？

这个就是个小麻烦的事，嗯，卡死了我，关键我也动不了了，这咋的是行吧，吃饭吧，下午再说。