swiper

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

使用方法:

引入文件

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

Swiper Animate使用方法

1. 使用Swiper Animate需要先加载swiper.animate.min.jsanimate.min.css

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

 

var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })

 

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

swiper-animate-effect:切换效果,例如 fadeInUp 
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

利用swiper.animate写了两个微信小场景。

https://github.com/luoxiaowei/weixin/tree/master

 

posted @ 2017-06-19 15:06  xiaowei-MAX  阅读(206)  评论(0编辑  收藏  举报