FOR复试

复试最后一天

对于项目理解
此次复试,我是做关于腾讯官网的仿写,由于很久没有再上手相关项目,所以这次的项目并没有能够在规定时间完成,但还是学了复习了很多,对于项目有以下的理解。
导航栏:
相对于之前仿写的学校官网导航栏,腾讯官网的导航栏是具有悬浮时整块下拉的效果,我本来想要用div标签,通过控制透明度或者z-index值来实现下拉菜单这一效果,但没有实现。
视频自动播放部分:
按理可以使用vedio标签加部分js实现,但无奈本人水平不足,只是用截图来进行填充。
悬浮时图片放大效果:
通过百度(万能的度娘)知道了transform中的scale属性可以用于图片缩放,那么图片缩放问题得到解决,但是图片缩放后,可能会“溢出”,这个时候就需要外部div盒子设置overfloat;hidden属性,同样的,在鼠标移到图片上去时应该有一层半透明的遮罩层,这部分可以通过设置外部div的background-color的透明度来达到遮罩层的效果。但是,在鼠标悬浮上去时,放大会切换的很僵硬,所以最好加上transition有一个过渡的效果
关于轮播图:
轮播图本身应该由多张图片叠加在同一位置,通过设置时间器来使其最上方图片渐隐,经过循环来达到轮播的效果,本身我想要用之前的方式,来进行设置,期间运用js监听事件来控制左右标识进行图片借切换,如下图方法(之前做网页用的代码)关于轮播图
关于第一个轮播图的形状
第一个轮播图的形状是不规则的,而我们平常所用到的图片一般都是正方或长方形,那么不规则的形状怎么出来的呢,通过查看网页的资源目录,我发现有一个斜角的白色三角形,所以一般做特殊形状的图片时,我们也可以在图片上面设置一个div放置相应的图片来进行遮罩(和网页背景色要相同),就可以达到不同形状的图片效果了。
关于其他
其他其实关于导航栏处视频上方白字的翻转效果以及线条的滑动动画等等都是目前的我尚且不懂的问题,但此次的项目复试也让我又一次进行了对知识的复习,在做的时候也不断在学习,虽然b站上的课还没看完…但最重要的是从中不断学习,有了紧迫感学起来就更加快且有效了。
前端学习,继续努力!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值