记录一下

关于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中的结构调整不同的位置试一试，可能会得到你想要的！

判断可视区域来确定显示隐藏元素

具体的方法在另一篇笔记中这是地址