zoukankan      html  css  js  c++  java
  • swiper,animate使用方法

    1、先链接css和js文件

    <link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
            
    <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script> 

    2、初始化

    /* 初始化swiper.js */
    var mySwiper = new Swiper('.swiper-container',{
            pagination : '.swiper-pagination', //分页器
            direction:'vertical', //垂直方向换页
            slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1
            
            /* 初始化animate */
            onInit: function(swiper){  //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper);  //隐藏动画元素 
                setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了。。。。。)
                    swiperAnimate(swiper); //初始化完成开始动画
                },2000)
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            } 
    })

    4、使用animate的动画,注意class中要加“ani”

    <img class="ani pic" src="pic.jpg"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />

      自定义的动画效果:

      html中添加class=“ani” 和swiper-animate-effect=“动画名”,可以与animate自带的动画一样,在每次切换时运行动画。

    <img class="ani pic" src="pic.jpg"  swiper-animate-effect="shutter2" />

      css中定义效果

    @-webkit-keyframes shutter2{
        from{top: 100%;}
        to{top: 0;}
    }
    .shutter2{
        -webkit-animation: shutter2 0.5s forwards;
        animation: shutter2 0.5s forwards;
    }

    API地址: http://www.swiper.com.cn/api/start/2014/1218/140.html

  • 相关阅读:
    Spring boot 使用多个RedisTemplate
    Spring boot 连接Redis实现HMSET操作
    Spring boot 工具类静态属性注入及多环境配置
    向量空间模型(Vector Space Model)的理解
    双数组Trie树中叶子结点check[t]=t的证明
    谈谈我对隐马尔可夫模型的理解
    Information Retrieval 倒排索引 学习笔记
    朴素贝叶斯文本分类简单介绍
    Python Thrift 简单示例
    迭代器模式(Iterator)
  • 原文地址:https://www.cnblogs.com/animagi/p/5413458.html
Copyright © 2011-2022 走看看