<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />

         <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery  -->

         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

         <script src="swiper-dist/js/swiper.jquery.js"></script>

         <link type="text/css" rel="stylesheet" href="animate.min.css" />

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

         <!--<script src="swiper-dist/js/swiper.js"></script>-->

         <style>

             .swiper-container {

                 width: 600px;

                 height: 300px;

                 background: red;

             }

             .box{

                 margin: 20px;

                 width: 300px;

                 height: 80px;

                 background: yellowgreen;

                 font-size: 24px;

                 text-align: center;

                 line-height: 80px;

                 color: #fff;

             }

         </style>

     </head>

     <body>

         <div class="swiper-container contaianer">

             <!-- 内容部分 -->

             <div class="swiper-wrapper">

                 <!-- 每一页 -->

                 <div class="swiper-slide">

                     0

                     <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'

                          swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>

                     <div class="box rollIn animated">阿萨德发士大夫撒旦</div>

                 </div>

                 <div class="swiper-slide">

                     1

                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->

                 </div>

                 <div class="swiper-slide">

                     2

                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->

                 </div>

             </div>

         </div>

         <button onclick="btnAction()">按钮</button>

         <script>

         //常见swiper对象

         //参数1：swiper容器选择器，或者dom对象

         //参数2：swiper配置项

         var con = document.querySelector('.swiper-container');

           var mySwiper = new Swiper(con, {

             loop: true,

             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

                 swiperAnimateCache(swiper); //隐藏动画元素

                 swiperAnimate(swiper); //初始化完成开始动画

             },

             onSlideChangeEnd: function(swiper){

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

             } ,

             onTouchEnd: function(swiper){

                 console.log('end');

                 swiperAnimate(swiper);

             }

           })   

           function btnAction(){

 //              alert(1)

               console.log(swiperAnimate)

               swiperAnimateCache(mySwiper);

               swiperAnimate(mySwiper);

           }

           </script>

     </body>

 </html>
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />

         <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery  -->

         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

         <script src="swiper-dist/js/swiper.jquery.js"></script>

         <link type="text/css" rel="stylesheet" href="animate.min.css" />

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

         <!--<script src="swiper-dist/js/swiper.js"></script>-->

         <style>

             .swiper-container {

                 width: 600px;

                 height: 300px;

                 background: red;

             }

             .box{

                 margin: 20px;

                 width: 300px;

                 height: 80px;

                 background: yellowgreen;

                 font-size: 24px;

                 text-align: center;

                 line-height: 80px;

                 color: #fff;

             }

             @keyframes my-animate{

                 from{

                     transform: translateX(-200px) scale(0.2);

                 }

                 to{

                     transform: translateX(0) scale(1);

                 }

             }

             .myAni{

                 animation-name: my-animate;

             }

         </style>

     </head>

     <body>

         <div class="swiper-container contaianer">

             <!-- 内容部分 -->

             <div class="swiper-wrapper">

                 <!-- 每一页 -->

                 <div class="swiper-slide">

                     <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'

                          swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>

                     <div class="box myAni animated">阿萨德发士大夫撒旦</div>

                     <div class="box ani" swiper-animate-effect="myAni" swiper-animate-duration='1s'>阿萨德发士大夫撒旦</div>

                 </div>

                 <div class="swiper-slide">

                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->

                 </div>

                 <div class="swiper-slide">

                     <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->

                 </div>

             </div>

         </div>

         <script>

         //常见swiper对象

         //参数1：swiper容器选择器，或者dom对象

         //参数2：swiper配置项

         var con = document.querySelector('.swiper-container');

           var mySwiper = new Swiper(con, {

             loop: true,

             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

                 swiperAnimateCache(swiper); //隐藏动画元素

                 swiperAnimate(swiper); //初始化完成开始动画

             },

             onSlideChangeEnd: function(swiper){

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

             }

           })   

           </script>

     </body>

 </html>

swiper-animate的更多相关文章

  1. 微信网页动画---swiper.animate.css

    项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  3. 使用swiper.animate时，给一个对象添加两个动画且动画循环的方法

    swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...

  4. swiper的使用

    最近要用html5制作可以一屏一屏向上滑动的页面,发现大家使用swiper插件的较多,所以试了试,发现做出来的效果还不错,喜欢的朋友可以参考一下自己动手做啦. 1.首先我们要引入4个文件: <h ...

  5. swiper轮播图--兼容IE8

    //引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...

  6. 移动端开发（四）：swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  7. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  8. swiper.js插件的使用

    swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html>    <he ...

  9. swiper.animate--css3翻页动画

    基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x . 1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate. ...

  10. css常用效果总结

    1.给input的placeholder设置颜色 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:maroo ...

随机推荐

  1. 【转载】vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header

    来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241 vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Inv ...

  2. MySQL练习题--sqlzoo刷题2

    SELECT from Nobel Tutorial 1.Change the query shown so that it displays Nobel prizes for 1950. SELEC ...

  3. 编译错误提示PATH_MAX未声明

    解决办法: grep一下,发现PATH_MAX在limits.h中定义,在/scripts/mod/sumversion.c中添加#include <limits.h>即可. #inclu ...

  4. 【LeetCode】水题（刚开始重新刷题找感觉用的）

    [9] Palindrome Number [Easy] 给一个数字,用不转化成字符串的方式判断它是否是回文. 先求数字长度,然后把数字的后半段做翻转(就是不断地取模,除10这种方式),然后判断前后半 ...

  5. transform：translate（-50%，-50%）

    和父亲元素没关系,走自己盒子宽度一半

  6. Mina---系统学习

    1.为何使用Mina? java提供的BIO.NIO使用的复杂性等原因,导致Mina框架的诞生: 2.什么时候使用Mina? 易于使用 高并发的用户量 被证明的系统: Mina已被全球数以万计的应用使 ...

  7. 【版本】Spring Cloud 版本

    Spring Cloud 版本 Spring Cloud没有数字版本号,而是对应一个开发代号 Cloud代号 Boot版本(train) Boot版本(tested) lifecycle Angle ...

  8. 冲刺$\mathfrak{CSP-S}$集训模拟赛总结

    开坑.手懒并不想继续一场考试一篇文. 既没必要也没时间侧边栏的最新随笔题解反思相间也丑 而且最近越来越懒了竟然都不写题解了……开坑也是为了督促自己写题解. 并不想长篇大论.简要题解也得写啊QAQ. 目 ...

  9. DesktopLoader服务程序

    program DesktopLoader; //{$APPTYPE CONSOLE} uses Windows,WinSvc,ShellApi; var s:String; iDesktops,jD ...

  10. Golang flag包使用详解(一)

    概述 flag包提供了一系列解析命令行参数的功能接口 命令行语法 命令行语法主要有以下几种形式 -flag //只支持bool类型 -flag=x -flag x //只支持非bool类型 以上语法对 ...