00:00
哈喽,各位小伙伴大家好。我是上硅谷前端讲师冉平老师。这次给大家带来的是继HLCSSJS之后的上优选PC端项。上次课程当中,我们已经完成了放大镜鼠标移入和移出的效果。本次课程将继续实现放大镜移入时蒙版元素的拖拽效果。好,找到咱们的JS文件。前面呢,是咱们small pic当中设置的移入事件所做的一些事情。在移入事件之后,咱们添加一个移动事件,设置移动事件好么?Pic啊,点上on move等于function。那么元素移动。诶,这个元素它移动移动呢,我就不得不需要知道两个距离值,一个是当前蒙版元素距离,小图框元素它的left的距离。
01:14
诶,它的left的距离,当然这个方向也需要知道。Top距离。我想要求这两段值,我就需要一些已知条件做辅助。好我呀,把当前咱们现在移入之后的这个界面呢,我把它截出来。把它截出来啊,咱们给它保存一下放到桌面。咱们呢,用画图板给它打开。找到画图板啊。好,打开当前咱们刚才保存好的这个文件,嗯。拉大一些啊,我现在想要求的呢,刚刚咱们画的那段值是蒙板元素距离咱们小图框元素它的两个位置。
02:19
蒙板元素距离小,图框元素的。Left的。诶,我要求的是这块。当然上方呢,这个位置就是蒙板元素距离小图块。元素的top值。哎,我要就要求这两个值,当然我要求这两个值,咱们刚才说了,是不是需要一些已知条件做支撑,对吗?好。
03:01
那你就得想啊。我现在的这个鼠标,它是不是要移入到当前小图框元素上?一入,那么一定会有一个什么鼠标点。诶,一定会有一个鼠标点,好,假设我现在所画的这个点是咱们的鼠标点。那鼠标点有了之后,相对应的一些距离值也就产生了,我用橙色线来表示,来我画一下啊。鼠标点距离咱们浏览器左侧的这一段值,你知不知道?这肯定是知道的呀,对吗?诶鼠标点距离浏览器左侧的这段X轴的距离值,你一定是一个已知条件来写上一点注释啊。
04:01
这是咱们鼠标点。距离浏览器左侧。当X轴的距离值。啊,这个距离值你是一定知道的啊,当然咱们需要什么来进行实现呢?是需要通过事件对象当中的可兰X这样的属性来实现,当然反向方向道理是一样的啊,事件对象里边的一可兰Y。啊,好。不难发现啊,我现在想要求的是不是就是我橙色线其中的某一段距离?对吧,诶,我要求的是它里边其中一段的距离。我只需要把咱们现在我画出来绿色线的这一段。
05:00
哎,往上画一点啊。来把绿色线这一段给它搞定。然后我还得需要知道咱们现在紫色线的这一段,把它搞定。那把两个距离都搞定了之后,是不是我就用橙色线的距离减去紫色线的距离,再减去绿色线的距离,就得到了红色线的距离呢?问题一下子是不是就明朗起来了?好,当然有同学在想了,那又绕回来了,那绿色线怎么求呢?对吧?那我的紫色线怎么求呢?它俩都求完了,好,最终我才能怎么着啊,诶,拨开云雾,见到了。美好的明天。对吗?嗯,来,咱们来分析一下吧。此时啊,咱们现在想要求的是红色线的距离对吗?红色线的距离应该等于橙色线的距离值减去咱们紫色线的。
06:17
距离值还得减去绿色线的距离值。啊,橙色线减紫色线减绿色线,好,咱们刚才啊已经分析了,橙色线它的距离等于是你的鼠标点距离浏览器左侧X轴的这段值,当然Y轴也一样。好,已知条件已经产生了一个了,再看你紫色线的距离是不是应该和小图块元素有关系。
07:01
来,我用蓝色线来表示。小图框在这儿了呀,那小图框左侧它距离浏览器的这段值,咱们应该怎么求呢?诶,小图框距离浏览器左侧它的这段值,咱们咱们应该怎么求呢?跟元素相关的。诶。你这段值啊,其实就是你浏览器当中它的一段可视的一个距离值。啊,可视的距离值,什么叫可视的距离值呢?我现在如果底下有横轴来想象一下啊,我现在浏览器如果底下有横轴的话,我把浏览器横向来进行拖动,我拖动的过程当中,那么这个距离是不是一定会发生变化?
08:00
对吗?诶,也就是说你这个小图距离你现在浏览器它的一段可视距离。啊,我能够看到的一个距离。啊,所以那么这个距离咱们应该使用的是什么呀?来写上一下吧,是咱们小图框距离浏览器的一个可视,不是这个啊,可是。距离。啊,这个可视距离呢,需要借助于一个方法。大家这个方法不知道大家有没有印象啊,叫做get。帮丁。Rat。啊,这个方法啊,它的返回值是一个对象,那么在这个对象当中里边有什么top值啊,或者是什么这个right指啊,Left值啊等等啊,咱们只需要它的两个方向,一个是left,一个是top。
09:09
好,当然上面的这个位置呢,咱们也去写一下,这是咱们事件对象的可兰X或者是可兰Y。剩下一个就是绿色线距离了,绿色线距离应该等于什么呢?绿色线距离应该等于什么呢?固定的是不是它应该来自于来我给你画一下啊,来你发现现在绿色线的距离恰好应该等于啥呀?哎,你能看得出来是不是为蒙板元素的一半啊。对吗?哎,蒙板元素宽度的一半好写上。蒙板元素宽度的一半。好。那么宽度这个事情,咱们原来在讲到鲍姆,你一定记得有一个叫站位宽,有一个叫做可视宽。
10:09
可wise和offet,咱们到底应该选择哪一个?诶,咱们针对元素本身的宽度都使用的是占位宽,因为要包含它的边框像素。嗯,来这写上mask div,它里边的over set was除以二。A除以二好了,那现在总的来说红色线的距离是不是就应该等于事件对象当中的可烂的X轴的值减去小图框?的get Bing c RA里边left轴的距离还得减去mask div,它占位宽度的一半。
11:08
这样的话,咱们对应的什么?诶,写上mask,它里边的left值是不是就应该这样求出来了呢?对吗?诶,点反向的方向,道理也是相通的,Mask点撕掉点top等于啥呀?点let y减去small piic。点上get Bing RA这个方法里边的top值还得减去蒙版元素,它占位高度的一半,再加上一个像素单位。好了。此时咱们现在的一个分析。
12:03
接近尾声了。啊,接近尾声了,来吧,咱们呢,把对应咱们现在刚才分析之后的这个结果贴到代码当中。来。在这儿写上。Were left定一个变量等于什么呢?Event,这个event哪来的?是不是只要有事件函数当中加上第一个参数,这就是为咱们的事件对象。对吗?诶,事件对象当中可烂的X。这块写上。Event点上X,那在这个位置呢?咱们写上,它是鼠标点距离浏览器左侧X轴它的一个值。
13:01
好了,那么现在啊,这个鼠标点呢,距离浏览器左侧X轴的值啊,咱们已经实现了。让它再来减去,减去什么,是不是我现在刚才说到的紫色线的距离。为莫pic点儿上。Get a。Bonding啊,RA。好了,那这个方法啊,咱们知道它返回来的呢,是一个对象,我需要在这个对象当中获取它的left的值来写上。Geting,啊,RA点上left,这个呢,是咱们小图框元素啊,距离浏览器左侧的可视left的值。啊,可是的left的值来再减去什么。
14:00
是咱们mask div啊,这个蒙版元素的offset宽占位宽度的一半啊,Overset宽为。元素的站位宽度。啊,站位宽度。好了,那么现在left写好了之后呢,咱们就需要来复制一份,把它改成to。外。哎,这呢也写上top,把它呢换成高度。Left的值有了,Top的值有了,我只需要把它俩重新设置,修改咱们样式表。来看一下样式表。来,往下走往下走,在这里mask元素之前咱们在写样式表的时候,是不是给它写了一个left的属性为零,Top的属性也为零,对吗?诶,只有通过点掉的一个行间样式方式,才能让它重新设置这两个属性值。
15:18
来吧,写上啊。设置left和top属性。咱们mask div点死掉等于left加上像素单位啊,当然这个left和这个left的话,它不是一回事啊,这呢是咱们的变量名,这个呢是咱们样式对象下的left的属性啊,它俩只不过恰好同名而已。来复制粘贴一份。把它的top变量改一改,咱们来看一下效果吧。运行一下当前的这个页面,嗯,右键啊好。
16:03
此时咱们现在这个蒙版元素是不是就已经实现了它的拖拽效果?
我来说两句