博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
swiper的基础使用(十七)
阅读量:6611 次
发布时间:2019-06-24

本文共 1155 字,大约阅读时间需要 3 分钟。

hot3.png

本文为机构官方的教程 。

 
这次内容我们接着介绍在swiper页面的翻页动画--3D覆盖流效果。
 
首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。

然后与我们之前的3D方块效果使用方法一样,添加属性,并对动画进行设置。

var swiper = new Swiper('.swiper-container',{                pagination:'.swiper-pagination',                grabCursor:true,                centeredSlides:true,                slidesPerView:'auto',                effect:'coverflow', //动画效果:3D覆盖流效果                coverflow:{                    rotate:50,                    stretch:0,                    depth:100,                    modifier:1,                    slideShadows:true                }            });

我们的动画设置当中都设置了什么呢?

coverflow:{                    rotate:50,  //旋转的角度                    stretch:0,  //拉伸                    depth:100,  //深度                    modifier:1, //修正值(该值越大前面的效果越明显)                    slideShadows:true  //页面阴影效果                }

最好我们的动画效果与分组显示来一起使用,单独使用效果不好。

点击进入swiper强化教程:

转载于:https://my.oschina.net/zhanyingwang/blog/708197

你可能感兴趣的文章
test
查看>>
我的ubuntu下的防火墙脚本
查看>>
linux 内核网络,数据接收流程图
查看>>
Java基础---Java中方法的重裁(四十一)
查看>>
Mongodb(二)基本概念和操作
查看>>
硬盘接口
查看>>
Linux学习笔记4
查看>>
【YUM】第三方yum源rpmforge
查看>>
计算机系学长的大学四年
查看>>
MySQL学习笔记_5_SQL语言的设计与编写(上)
查看>>
2005上半年网络工程师上午试题分析与解答
查看>>
Exchange的安全问题(一)
查看>>
C# winform中自定义用户控件 然后在页面中调用用户控件的事件
查看>>
Yii2使用驼峰命名的形式访问控制器
查看>>
[react-native] 华为真机安装失败解决方法
查看>>
Confirm the Ending
查看>>
17. Debuggers (调试器 5个)
查看>>
toUperCase() 与 toLowerCase()
查看>>
python2.7安装requests
查看>>
2007舜宇杯ACM程序设计浙江省赛结果
查看>>