博客> swiper的基础使用(十六)
swiper的基础使用(十六)
2019-08-18 18:21 评论:0 阅读:616 zhanying
html5 swiper

本文为H5EDU机构官方的HTML5培训教程 swiper教程。 这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。

首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。

然后在js当中进行初始化以及添加翻页动画。依然是一条属性,但是有些不同。 var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', grabCursor:true, effect:'cube', //翻页效果:方块 cube:{ shadow:true, slideShadows:true, shadowOffset:20, shadowScale:0.94 } }); 那么除了直接添加的属性意外,我们的翻页动画当中还有着自己的属性,就是这里 cube:{ shadow:true, //阴影效果,如果设置为false下面的就不用 slideShadows:true, //页面阴影效果 shadowOffset:20, //阴影的偏移值 shadowScale:0.94 //阴影的大小 } 这样就实现了3D方块的翻页效果 点击进入swiper强化教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部