<!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. ssh-keyscan - 收集 ssh 公钥

    总览 (SYNOPSIS) ssh-keyscan -words [-v46 ] [-p port ] [-T timeout ] [-t type ] [-f file ] [host | addr ...

  2. Manjaro配置中国源

    1.自动寻找中国源 sudo pacman-mirrors -i -c China -m rank//更新镜像排名sudo vim /etc/pacman.d/mirrorlist //查看选择的源s ...

  3. ChainMap & python args parse

    python的内建模块ChainMap可以把一组dict串起来并组成一个逻辑上的dict.ChainMap本身也是一个dict,但是查找的时候,会按照顺序在内部的dict依次查找. 什么时候使用Cha ...

  4. leetcode-12双周赛-1243-数组变换

    题目描述: 自己的提交: class Solution: def transformArray(self, arr: List[int]) -> List[int]: if len(arr) & ...

  5. 【LeetCode 9】回文数

    题目链接 [题解] 还是要注意,取反的时候,-2^31 取反的话会爆掉Int..(因为int的正数最多到2^31-1) [代码] class Solution { public: bool isPal ...

  6. 拆边+BFS队列骚操作——cf1209F

    这个拆边+队列操作实在是太秒了 队列头结点存的是一个存点集的vector,1到这个点集经过的路径权值是一样的,所以向下一层拓展时,先依次走一遍每个点的0边,再走1边...以此类推,能保证最后走出来的路 ...

  7. 高级运维(五):构建memcached服务、LNMP+memcached、使用Tomcat设置Session、Tomcat实现session共享

    一.构建memcached服务 目标: 本案例要求先快速搭建好一台memcached服务器,并对memcached进行简单的添.删.改.查操作: 1> 安装memcached软件,并启动服务d ...

  8. noip提高组 2010 关押罪犯 (洛谷1525)

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用"怨气值"( ...

  9. JAVA并发工具类---------------(CountDownLatch和CyclicBarrier)

    CountDownLatch是什么 CountDownLatch,英文翻译为倒计时锁存器,是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 闭锁可以延迟线程的进 ...

  10. Makefile中的函数

    Makefile 中的函数 Makefile 中自带了一些函数, 利用这些函数可以简化 Makefile 的编写. 函数调用语法如下: $(<function> <arguments ...