00:00
哈喽,各位小伙伴大家好。我是上硅谷前端讲师任平老师。这次给大家带来的是继HTMLCSSJS之后的上优选PC端项。在上次课程当中呢,咱们已经实现了路径导航的动态渲染功能。本次课程咱们将来完成的是放大镜结构布局部分。A、放大镜的结构布局。好,咱们来观察一下啊,我呀,把鼠标放到咱们的放大镜元素上面,产生了如下的效果,第一。中间的区域里边多了一个。可以透视到底下图片的这么一个元素,那这样的一个元素呢,咱们把它叫做蒙版元素。A、蒙版元素。
01:02
左侧我现在所画着蓝色区域的。这个框怎么把它叫做小图区。诶,小图区。而你把鼠标移入到上面,右侧也产生了一个什么大图框,以及里边的大图片。诶,粉色咱们现在所画的这个区域,把它叫做什么大图框。嗯,大图框元素,那么在这个大图框里边放着一个。宽高非常大的一个什么大图片儿元素。诶,要不然你没有办法去实现咱们的放大镜效果。啊,没有办法去实现咱们的放大镜效果啊,好也就是说。
02:00
整体咱们左侧的。这个放大镜。元素包括什么?一个是小图框,在小图框里边有蒙版元素,右侧有大图框,大图框里边有大图片元素。好了,结构咱们分析了之后,找到对应的位置。先来上一行注释。写上咱们这是放大镜效果,诶当然这个放大镜啊,我呢把它左右两侧都放到了一起。诶,都放到了一起啊。怎么在这儿呢?写上放大镜效果。开始。来,这是放大镜效果,结束。起上一个名儿,NAV。中间的部分我呀叫做center啊左侧。
03:02
放大镜,诶这个叫做中间吧。啊,中间取。中间的区域开始,中间的区域结束啊结束,然后左侧的放大镜。开始和放大镜结束,来加上一个井号,叫做left。诶,然后呢,还有咱们对应的右侧。右侧呢是商品的详情区。诶,商品的详情区域开始。在这再加上一个结束好了,右侧的这个div呢,咱们先等一会再去写啊,等一会再去写啊,在左侧的里边,首先咱们需要一个大的div。给它起一个名吧,叫做leftop,为什么呢?因为咱们放大镜整体。
04:04
分上下两个部分,诶上面呢,是咱们刚提到的那个小图框,包含了小图元素,而底下是咱们的缩略图部分。诶,缩略图部分啊,所以啊,在这我分了上下两块。这叫做上边。诶,下边啊,我先把注释写好,一会儿呢,咱们再去对应的往里面去添加。在lefttop当中,咱们分为小图。和大图。诶一个是,诶不是这个框啊,小图框还有大图框,咱们刚看到了小图框呢,起一个名字吧,叫做small pic。啊,小图框,小图框里边有什么小图片。
05:03
啊,小图框里边有小图片。来加上一个image。图片呢,来自于小图SE。啊,不光啊有小图片来把鼠标往上放,这个在小图框当中是不是有小图片。还有一个什么A,还有一个蒙版元素。诶,还有一个蒙版元素啊,来在这接着添加,写上蒙版元素,这个蒙版呢,咱们起一个名儿叫做mask。诶叫做mask。大图框大图框div井号叫做big pic。鼠标往上移,发现这个大图框位置不动,但里面的大图片位置是不是移动的对吧?诶,所以来里边再加上一个什么大图片。
06:05
诶,因为纸。Images下的大图b1.PNG好了,此时咱们的这个布局啊就写好了。嗯,结构已经出来了啊,结构已经出来,剩下的呢,咱们就需要给它再去添加对应的样式。来找到对应的位置吧。打开咱们的CSS下less的文件,把它放到一边,嗯。前面的写好的部分也可以给它收起来了啊,这是头部分类啊,这个是咱们的路径导航,好接着往这写。这是咱们的中间区,嗯,中间区开始。这个叫做center。好,中间区域里边呢,是左侧的放大镜。
07:00
嗯,左侧放大镜啊,左侧放大镜里边呢,分上下两块。上边。井号lefttop,好,然后下面的部分呢,咱们先不用管啊,先不用管,继续小图框。小图框呢,这个叫做井号墨pic,在小图框里边有它的图片,然后还有它的蒙版元素。嗯,蒙版元素啊,点mask。紧接着大图框。大图框。在大图框里边呢,就只有一个大图片。嗯,好了,整体的结构写好了之后,咱们来对照一下布局的参数,他说啊,咱们主要的内容区域的外层。
08:05
主要内容区域的外层指的是这个center来上一个merge。五像素015好,写好之后往下看,它说左侧的放大镜整体的宽度。诶400啊,当然呢,它还需要和右侧呢发生腐发生腐啊。当然呢,这里边啊,这个lefttop呢,它也是一个400的宽度,嗯,放大镜的区域啊,这是400,然后呢,高度也是400。还有一个边框,嗯,一像素,然后实线颜色是DFDFDF,嗯。诶,这是它后面的一个内容了啊,来咱们接着往下翻,往下翻在这儿啊,蒙版和大盒以及大图片。
09:07
他说了,蒙板当中的呢,是宽度为200,高度也为200。背景颜色background rgba啊255255255白色,然后透明度呢,点五一半。边框。包的一像素,然后实现。再加上一个ddd的颜色,嗯,这是咱们的蒙板,紧接着大盒就是咱们的大图框啊,宽度400。高度400。LEFT420和top为零,嗯,先放一边来,咱们先把边框加进去。咱们大图片呢,对应的是800,诶这呢高度也是800,好来研究一下吧,大图框,这个大图框呢,它里边有left。
10:11
Left是420像素,诶,Top为零,好,那你就去想吧,既然有left和top,那么它一定是一个定位的元素。对吗?相对于谁定位呢?我把鼠标往上放,那你来看吧,刚才咱们在写小图框的时候,它的宽度恰好是不是就为400乘以400。而你现在的一个大图框在这里对吗?它呀,距离左侧。距离左侧它说有多少,有420像素,也就是说中间的这个位置是不是恰好为20,那你说吧,它相对于谁定位啊。
11:02
是不是咱们左侧它的直接负元素。来,我把它折起来,折起来,你看现在picb piic,它的直接负元素是不是为lefttop。也就是说它是相对定位,它是绝对定位,自觉负相,好给它加上一个position的absolute。给咱们的lefttop加上一个a position的。没完啊,没有完,再看咱们现在把鼠标往上放,你发现了这个蒙版元素是不是在这个小图框里面。那么说明什么问题啊,这个mask和你的小图框之间是不是也是一个定位的关系?诶,也是一个定位的关系啊,来给这个mask的元素加上一个绝对定位,再来它的初始位置为left为零,Top也为零,好,给咱们small pic加上一个position的relative。
12:16
啊,来,咱们来观察一下吧,此时咱们现在的一个左侧小图框和它的蒙板布局已经OK了,但是右侧大图片它是800乘以800,而你的大图框才是什么400乘400装不下怎么办?诶,溢出隐藏给谁加给大图框加加一句overflow hidden。A overflow溢出的这些我全部都让它隐藏掉啊,都让它隐藏掉好了。这样的话,咱们初始。放大镜的结构布局咱们就已经实现完毕了。
13:03
诶,咱们最后来观察一下啊,在左侧里边呢,分上下两边,上边当中的有小图框。和大图框,小图框里边有小图片儿和蒙版元素,大图框当中有大图片儿。诶,这是咱们整体左侧放大镜的结构布局。
我来说两句