00:00
哈喽,各位小伙伴大家好。我是上硅谷前端讲师任安平老师。这次给大家带来的是继HLCSSJS之后的上优选PC端项。在上次课程当中呢,咱们已经完成了放大镜结构的布局。本次课程咱们将继续来完成鼠标移入到咱们放大镜之后的一个效果。不难发现,此时啊,就产生了两个现象,一个是咱们把鼠标移入到小图框之后,多了一个蒙板元素和右侧的大图框元素,诶,当然在大图框里边呢,还包括一个大图片。也就是说啊,这两个元素只有在什么情况下产生呢?鼠标移入的时候,而鼠标移出就不见了。这两个元素只有在鼠标移入的时候才有证明这两个元素,它是动态产生的元素。
01:07
而鼠标一移出来的时候,诶,咱们就需要让它消失不见。对应哪两个元素呢?一个是咱们的mask的元素,一个是咱们的big pic的元素。好,找到咱们的JS文件。打开index.ds刚刚啊,咱们已经实现了的是路径导航的动态渲染。此时你发现了所有的变量呢?咱们都放到了全局作用域上,为了避免在全局作用域上变量的一个污染问题,咱们把所有的功能都给它划分成一个函数写好,前面的呢,叫做NAV pass data。诶,在上面呢,写上一点注释,叫做路径导航的数据渲染。
02:06
函数定义好了之后,咱们需要来调用,当然你在前面调用也可以,在后面调用也可以,只不过在前面能调用的原因啊,是由于函数有域解析的功能,来把这个代码放进去。这样呢,这个函数啊,我就可以折起来了,接着往后继续开发。写上放大镜的一路。移出。遗书。效果。诶,放大镜的移入和移出啊,咱们先做这两个,首先呢,先来上一个function function。起个名叫做big克拉斯版好了,函数声明好了之后呢,咱们要去做调用,嗯。
03:01
来想一下它的思路应该是什么样的。诶,每次的话呢,我都喜欢把这个思路啊,给它列举出来,第一步。你鼠标是不是要移入到咱们的小图框。是不是要先去获取一下小图框元素对吗?嗯,来获取小图框。元素对象。并且设置什么移入的事件。当然呢,在这里啊,一入事件,咱们之前接触到的有两款,一个叫做almost over,还有一个叫做almost enter,到底使用的是over呢,还是使用的是enter呢?取决于你需不需要当鼠标移入到这个小图框事件的时候,影响到其负元素。因为大家都知道啊,咱们现在这个almost over,它有事件冒泡效果,Almost enter它没有。
04:09
哎,那就想吧,你需不需要你鼠标移入到小图框,把这个事件依次向上传递给它的副元素?不需要对吗?诶,所以在这儿咱们选择on enter的时间。选择了元素对应了事件之后,第二步我把鼠标往上移入之后,是不是产生了咱们的蒙版和大图框对吗?诶好写上啊。动态的来创建蒙版元素,以及小图框大图框A大图框的元素。和大图片。诶,大图框和大图片的元素。诶先得把它俩创建,把它俩创建,创建完了之后,对于移出时。
05:08
诶,移除时需要干什么?诶去移除。咱们的蒙版元素和大图框以及大图片,当然你大图框移除了啊,那个大图片呢,它就对应的也就消失了。啊,所以在这里边我就直接写成大图框啊,大图框啊大图框。好在这里啊,咱们思路写好了之后呢,首先第一步需要先获取。小图框元素。小图框元素把页面怎么跑起来?点击右键找到小图框,哪呢?这啊,Small pic,把右侧它的元素靠过来,在这写上were思沫。
06:03
Pic等于document,点上cor select,把里边的元素粘起来。粘进来之后,下一个步骤是不是要设置诶移入的事件,嗯,Small pic啊,点上enter等于function。好,那么一入事件写好了之后,你可以首先先来个啥呀,诶来个测试。诶,先来个测试。好,鼠标移进来的时候,咱们这是不是就有移入的效果对吗?嗯,好。把这个测试怎么给它删掉。下一步怎么着啊,动态来进行创建蒙版元素,好创建蒙版元素。一个mask的div等于。
07:03
Document element。参数呢?Div来观察一下,Class等于mask。诶,还得要给他设置class的属性,但是别忘了设置class属性为class name,为啥呀?诶因为人家要辟邪呢,因为class为关键字啊,所以在这里面,在这咱们需要写的是class name啊好,那么现在蒙版元素写好了之后,下一个步骤需要来创建大图框元素。Were big pic等于document,点上可element。写好div。这个pic点上ID,因为咱们之前在设立它的一个结构的时候,给它的是ID,把ID给它加进去,嗯,写好ID之后来继续大图框里边是不是有大图片对吗?嗯,接着第五步创建大图片元素。
08:17
啊,创建大图片元素,挖一个big image。等于document,点上create element。图片,Image。路径big image.s2C,把刚刚咱们写好的路径给它粘过去。好了,大图片也有,大图框也有了,那下一步是不是让你的大图框来怎么着啊,追加大图片诶,得把图片放到图框里边啊,大图框在这点a pen child的追加我的大图片图框追加图片好了,大图框整体画好了之后,蒙版也有了,最后第七步让谁呀?让咱们的他俩。
09:13
诶,首先你需要让leftop来追加大图框,让咱们的小图框追加蒙版,诶分别有两次追加。让咱们的小图框。来追加咱们的蒙版元素,好小图框啊,叫做small piic DR a pen child,把mask div这个蒙版追进来。再让lefttop的元素追加图框,好,那前面不免啊,咱们就得要去找一下这个大图当中的lefttop,嗯。这块呢,怎么放到最前面。
10:01
Lefttop等于document点上cor select。好,在这写上获取a lefttop元素。嗯,获取lefttop元素啊,好了,那么现在呢,在这写上lefttop,点上啊,Panda child,把big pic给它放进去。前面咱们写好的这个蒙版的位置就可以给它删掉不要了,嗯,这个位置删掉不要了啊嗯。好,保存之后咱们来观察一下,鼠标一入一次,你small pic是不是有一个新的蒙版,而你的大图框是不是也对应有里边的大图片,鼠标一入一次。一入一次,一入一次一入一次一入一次是你每次发生这个事件,都会来执行你在事件当中的这件事。
11:07
对吗?嗯,那么我需要有移入,还得对应有移出,当然你移入是叫做almost enter,那对应的移出就叫做almost live。哎,在这里边,咱们在这嵌套着去写啊。设置移出事件small pic,点上on leave等于function。诶,当然这个结构呢,咱们是在almost enter的里面,诶,因为移入的时候干的是这样的事儿啊,移出的时候呢,它需要借用咱们移入时候所对应的这个变量啊,产生一个作用域链的关系,嗯。来写好吧,首先让咱们的小图框怎么着啊,移除蒙版元素。
12:05
Small pic,点上removechild,把咱们mask div给他移除。鼠标一进去的时候有,出来的时候就没有了。诶,来,咱们看一下,鼠标一进去的时候观察是不是在这儿多了一个蒙板对吗?嗯,鼠标移出去的时候就没有了,诶,这是咱们的蒙板搞定了,紧接着让咱们leftop的元素怎么着啊,移除大图框好leftop.remove child把。Big pic大图框移除出去。来观察鼠标移入的时候是不是产生了蒙板和大图画。一个在这里。哎,一个在这里好,鼠标移出去的时候是不是就都没有了呢?嗯,这样的话,咱们的移入事件的需求就写好了。
13:10
啊。当然,在这里呢,我多一句啊,需要知道remove的移除前面的这个元素和它参数的这个元素,它俩必须为直接的子负关系。啊,必须为直接的子符关系,否则就会报错啊,否则就会报错好了,这样的话呀,咱们就把放大镜鼠标移入移出的事件完成了。
我来说两句