关于video
1.开发中的需求是把页面上的banner换成一个video视频进行循环播放,但是video会根据自己的宽或者高进行缩放
我的方法:
vopup-video是video的父级,给它宽高100%;
我的视频宽度正好是1920px的 所以就不用给 #media(给视频的id) 宽高,因为给我的视频文件上下有两个黑边所以我让它向上-17% 把视频上方的黑边正好覆盖掉。
.vopup-video{
width: 100%;
height:100%;
position: relative;
}
#media{
margin-top: -17%;
}
2.video如何自适应铺满整个父级
我的方法 用object-fit:cover;
具体的方法在另一篇笔记中这是链接
关于swiper
开发里多次用到了swiper这个插件
总结了下面的一些经验;
1.swiper可以嵌套,过要给一个不同的class名字,再用js去new出实例
2.swiper中的animate插件,在swiper嵌套的过程中 ,如果给其中一个swiper中的元素加上swiper.animate的效果,另一个也会受到影响,所以说swiper的animate只能加给其中一个,
解决方法:这个问题在google上查到了一个方法是将swiper.animate中的函数复制一遍 重新命名,然后再将复制出来的函数中 获取的‘.ani’也重新命名,这种方法等于说是两套一样的animate函数只是名字不一样了,调用也不会冲突了,但是如果要给三个swiper添加效果,等于说要再复制一份 。具体是否要用这种方法看情况而定
3.再使用swiper时如果结构达不到想要的样子时,可以多试试将swiper中的结构调整不同的位置试一试,可能会得到你想要的!
判断可视区域来确定显示隐藏元素
具体的方法在另一篇笔记中这是地址