<!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 使用pug（详细说明）

    1.安装pug npm i -D pug pug-html-loader pug-plain-loader cli2.0脚手架修改build/webpack.base.conf.js文件 module ...

  2. 6380. 【NOIP2019模拟2019.10.06】小w与最长路(path)

    题目 题目大意 给你一棵树,对于每一条边,求删去这条边之后,再用一条边(自己定)连接两个连通块,形成的树的直径最小是多少. 正解 首先,将这棵树的直径给找出来.显然,如果删去的边不在直径上,那么答案就 ...

  3. 设计不严谨 - Get参数传日期空格未转义字符出现截断请求，后端无法处理

    设计不严谨 Get参数传递日期的时候有空格,如果未转义的话,会截断请求,然后后端无法处理. 从业务场景看 从产品的角度看,产品想要看每个活动的效果,而不是想知道技术. 角度不同,视觉不同 mark

  4. go声明和初始化

    go声明和初始化 当我们第一次看见变量和声明时,我们仅仅看见一些内置的类型,比如整型和字符串.现在我们将学习结构体,并且我们会深入学习包括指针的内容. 通过一种最简单的方式去创建一个结构体值类型: g ...

  5. Yii2-rbac

    下面介绍一个 yii2.0 的 Rbac 权限设置,闲话少说,直接上代码,   1.首先我们要在组件里面配置一下 Rbac ,如下所示(common/config/main-local.php或者ma ...

  6. tarjan强连通缩点——cf711D

    模板题 #include<bits/stdc++.h> using namespace std; #define ll long long #define N 500005 #define ...

  7. Java桌球小游戏

    版本一.出现窗口package cn.xjion.game;/** * 出现窗口 * @author xjion * */import java.awt.*;import javax.swing.*; ...

  8. 牛客网暑期ACM多校训练营（第五场） Agpa (最大化平均值）

    题目大意: 给定 n 门课以及它们的学分和绩点,定义总绩点是所有课的加权平均数,给定一个数 k, 你可以删除最多 k 门课,求你的总绩点最大能到多少 分析: 上面是牛客的官方题解,其实就是移项, 然后 ...

  9. yum 快速LAMP/LNMP 安装（centos7+mysql5.7+apache+php5.6 (缺点:好多模块没有加载)

    1.安装Apache 安装centos7默认自带(Apache2.4.6)版本 yum -y install httpd 2.开启apache服务 systemctl start httpd.serv ...

  10. 一：unittest框架配合selenium工具之CSS_selector定位。

    做了自动化测试这么久了,一直没有梳理到元素定位这一块的内容,其重要性不言而喻.趁着周末有时间,梳理一下. 1,通过id定位 driver.find_element_by_css_selector(&q ...