zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    四则运算02
    第三周学习进度条
    《构建之法》阅读笔记1
    第二周学习进度条
    四则运算01
    第八周进度条
    每日站立会日07,08
    每日站立会议06
    每日站立会议05
    每日站立会议04
  • 原文地址:https://www.cnblogs.com/luoxiaowei/p/7048751.html
Copyright © 2011-2022 走看看