swiper-制作活灵活现的微场景、微海报(一)

前几天，接到怎么一个任务，就是制作财富测试的微场景，于是就找寻如何制作的办法，希望做出的效果能与腾讯节气微场景相似，当然不用做得怎么漂亮！于是接触了Swiper（http://www.swiper.com.cn），这是一个好东西，能够快速建立微场景、微海报、灯箱（也可以用iscroll.js）等web app！

Swiper使用方法：

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

2.HTML内容。

<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>

<!--导航等组件可以放在container之外-->

3.你可能想要给Swiper定义一个大小，当然不要也行。

4.初始化Swiper：最好是挨着</body>标签。

<script>

var mySwiper = new Swiper ('.swiper-container',

{ direction: 'vertical',

   loop: true,

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

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

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

</script>

</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

Swiper Animate使用方法:

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x和Swiper3.x 。
此插件不适用于loop模式

1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

<!DOCTYPE html>

<html>

<head> ...

<link rel="stylesheet" href="path/to/swiper.min.css">

<link rel="stylesheet" href="path/to/animate.min.css">

</head>

<body> ...

<script src="path/to/swiper.min.js"></script>

<script src="path/to/swiper.animate.min.js">

</script>

</body>

</html>

2. 初始化时隐藏元素并在需要的时刻开始动画。

<script>

var mySwiper = new Swiper ('.swiper-container',

{ onInit: function(swiper){

　　//Swiper2.x的初始化是onFirstInit

　　 swiperAnimateCache(swiper);

　　//隐藏动画元素

　　swiperAnimate(swiper);

　　//初始化完成开始动画  },

　onSlideChangeEnd: function(swiper){

　　swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

　　　} }) </script>

</body>

3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

</div>

4. 可选效果参考可参考animate.css

5. 如果以上这些效果不能满足你的需求，你可以仿照animate.css的格式制作一些其他效果，加到你自己的css文件。其他参数：transition-timing-function 。

6. 拓展应用：可以执行两种动画的升级版的Swiper Animate。

posted @ 2015-07-20 00:28 24k-小清新阅读(588) 评论(0) 收藏举报

刷新页面返回顶部

态度决定一切

swiper-制作活灵活现的微场景、微海报(一)

公告