zoukankan      html  css  js  c++  java
  • swiper.js插件的使用

     

    swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
            <link rel="stylesheet" type="text/css" href="css/index.css"/>
            <link rel="stylesheet" href="css/animate.min.css">
            <link rel="stylesheet" href="css/swiper-3.4.2.min.css"> 
            <script src="js/swiper-3.4.2.min.js"></script>        
            <script src="js/swiper.animate1.0.2.min.js"></script>   <!--引用animate.js和swiper.min.js需要先加载,放到head部分-->
            <title>移动端动画练习</title>
        </head>
        <body>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                       <p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
                    </div>
                    <div class="swiper-slide">
                       <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
                    </div>
                    <div class="swiper-slide">
                       <p class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
                    </div>
                </div>
            </div>

    //这个地方的初始化工作是在一起进行的 ,同时引入swiper.js 和animate.js两个文件 在官方的网站中有说明的。附上图片
            <script>
               var mySwiper = new Swiper ('.swiper-container', {
                      direction: 'vertical',
                   onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                   swiperAnimateCache(swiper); //隐藏动画元素
                   swiperAnimate(swiper); //初始化完成开始动画
                 },
                onSlideChangeEnd: function(swiper){
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
                  }
               })
            </script>
            
        </body>
    </html>

    本文的例子就是同时引入2个,所以初始化工作是在一起进行的

    附上另外一个链接 http://www.imqiyu.com/web/38.html

  • 相关阅读:
    spark的环境安装
    (7)zabbix资产清单inventory管理
    (6)zabbix主机与组配置
    (5)zabbix配置详解
    (4)zabbix监控第一台服务器
    (3)zabbix用户管理
    (2)zabbix硬件需求
    (1) zabbix进程构成
    centos7系统root无法通过su切换到某个普通用户
    01基础复习
  • 原文地址:https://www.cnblogs.com/agansj/p/7200882.html
Copyright © 2011-2022 走看看