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强化教程
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:swiper的基础使用(十六)-创新互联
文章位置:http://scyanting.com/article/ddogig.html