组件

一些常用的Jquery组件,安装与使用

栅格 采用flexboxgrid 处理响应式布局

官方文档 :  http://flexboxgrid.com

示例:

注：xs(小于768) sm(大于768小于1024) md(大于1024小于1200) lg(大于1200)

图片轮播插件 swiper

官方文档 :  https://www.swiper.com.cn/

示例:

 

html代码





Slide 1


Slide 2


Slide 3

引入方式

  import Swiper from 'swiper';

js代码

var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,

// 如果需要分页器
pagination: '.swiper-pagination',

// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
Slide 1
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

Slide 2
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

Slide 3
Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

头像裁剪上传 Cropper

官方文档 :  https://fengyuanchen.github.io/cropperjs/

示例:

 

html代码

js代码

import 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代码

引入方式

  import '../components/parallax/jquery.scrolly.js';

js代码

$('.parallax').scrolly({
bgParallax: true
});

parallax

滚动加载动画 AOS

官方文档 :  http://michalsnik.github.io/aos/

示例:

    


fade
属性 属性 属性 默认值
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