栅格 采用flexboxgrid 处理响应式布局
示例:
注：xs(小于768) sm(大于768小于1024) md(大于1024小于1200) lg(大于1200)
1234567891011<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
</div>
图片轮播插件 swiper
官方文档 : https://www.swiper.com.cn/
示例:
html代码
12345678910111213141516<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
引入方式
1import Swiper from 'swiper';
js代码
1234567891011121314var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
头像裁剪上传 Cropper
官方文档 : https://fengyuanchen.github.io/cropperjs/
示例:
html代码
123<div>
<img id="image" src="">
</div>
js代码
1234567891011121314import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
},
});
滚动视差背景动画 parallax
官方文档 : https://github.com/pixelcog/parallax.js/
示例:
html代码
1<div class="parallax" data-velocity="-.3"></div>
引入方式
1import '../components/parallax/jquery.scrolly.js';
js代码
123$('.parallax').scrolly({
bgParallax: true
});
parallax
滚动加载动画 AOS
官方文档 : http://michalsnik.github.io/aos/
示例:
123<div class="item aos-init" data-aos="fade" data-aos-once="false">
<div class="box-row">fade</div>
</div>
| 属性 | 属性 | 属性 | 默认值 |
| aos-offset | 是立刻触发动画还是在指定时间之后触发动画 | 200 | 120 |
| aos-duration | 动画持续时间 | 600 | 400 |
| aos-easing | 动画的easing动画效果 | ease-in-sine | ease |
| aos-delay | 动画的延迟时间 | 300 | 0 |
| aos-anchor | 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 | #selector | null |
| aos-anchor-placement | 锚位置，触发动画时元素位于屏幕的位置 | top-center | top-bottom |
| aos-once | 动画是否只会触发一次，或者每次上下滚动都会触发 | true | false |
fade
fade-up
fade-down
fade-left
fade-up
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
flip-up
flip-down
flip-left
flip-right
slide-up
slide-down
slide-left
slide-right
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right