00:00
哈喽,各位小伙伴大家好。我是上硅谷前端讲师任安平老师。这次给大家带来的是借HLCSSJS之后的上优选PC端项。上次课程当中已经完成了放大镜鼠标的移动效果。本次课程将继续来实现蒙版元素在移动过程当中的一个边界控制。好了,在这里啊,我已经提前准备好了咱们蒙板元素在移动过程当中的两个边界位置。一个呢,处于咱们坐标当中的零,零点。A咱们坐标当中的零,零点位置。嗯,00点位置,也就是说呀,现在这个蒙板元素左侧的一个方向。
01:02
不能比零要小。上面的一个方向也不能比零要小。诶,只要它小于零,我就给它强制怎么着设置为零,两个方向都是一样的。当然另外一个方向呢,就是它移动到了右侧。好移动到右侧,它距离咱们现在小图块。有效距离是不是我画的红色现在段距离?只要是它比这段的距离大,那也就是说它移动到了小图框的外侧。那你说老师,我怎么知道这段距离是多少呢?那好了,咱们就得来求一下。我想要知道红色线的距离,我还得要知道一些已知条件,比如说。
02:00
我现在小图框它的一个总宽度。啊,小图框的一个宽度来写上一下啊,这是咱们小图框元素的。宽度。嗯,小图框元素的宽度,好,那么这个宽度咱们都知道是400。对吗?嗯,除了这个宽度啊,我还需要知道来,我用橙色线来表示。此时,现在我画的橙色线的距离应该是什么呢?诶,蒙板元素的宽度。嗯,蒙板元素的宽度好了。那你告诉我吧,此时现在红色线的距离好不好求了?好球了呀。
03:01
对不对,哎,怎么着是用小图框。元素减去蒙板元素,它俩的什么宽度之差?A宽度之差。小图框宽度,还有蒙板元素的宽度,它俩的差只要是小于了我应该有的这个距离值。那这个蒙板元素是不是就已经逃出了小图框元素的一个魔掌?对吧,哎,好了在这里啊,咱们需要找到对应的位置,在哪写呢。你设置left的属性。和你设置的这个top属性,是不是得在他设置之前告诉你,你只能在哪一个区域内活动。对吧,只能在这旮瘩里边玩。
04:01
哎,只能在这里边玩啊好我呀,在这加上判断。说问。如果你现在left的这个距离值啊,小于零,首先是不是得先判断这个00点对吗?只要是你小于零,好,我就给你强制设置为零。当然反方向也一样问,如果top小于零,好,我现在top就让它设置为零。来吧,咱们把这个页面呢运行起来看一看效果。他现在是不是只有在我的00点里边活动出的去了吗?诶已经出不去了,右侧的这个方向是不是还得要给它加点边界设置对吧?诶加一下啊。反向,否则如果你现在的这个left的值啊,它大于了你小图框的宽,好,我问大家了啊。
05:06
小图框是负元素对吗?那它的框使它的宽度使用的是可子的宽。诶,因为它并不需要包含咱们的一个外边的边框,我只需要在边框内部来进行移动,好,所以它的宽度为可宽度。那我蒙板的宽,因为蒙板本身它是不是带有一个边框。诶,所以这个移项速你也要给它算上,那宽度怎么算成什么offet的占位宽。Aoet的占位宽好了。字摸pic的的宽度减去mask元素它的站位宽度。好了,只要啊你比这个距离值大,我就给你强制设置成,诶它们之间的。
06:07
差值。反方向也是同理的。否则,如果top的值大于了small pic的可的高度减去咱们。蒙板元素的站位高度。好,那我的top就等于什么?它们两个高度之差。来吧,最后做一下验证。此时咱们现在的这个蒙版,它的活动区域是不是就只能在什么小图框里边了呀,嗯了,那么本次课程呢,咱们就给它添加了一个边界的设置。
我来说两句