swiper-animate
<!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的更多相关文章
- 微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
- 使用swiper.animate时,给一个对象添加两个动画且动画循环的方法
swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...
- swiper的使用
最近要用html5制作可以一屏一屏向上滑动的页面,发现大家使用swiper插件的较多,所以试了试,发现做出来的效果还不错,喜欢的朋友可以参考一下自己动手做啦. 1.首先我们要引入4个文件: <h ...
- swiper轮播图--兼容IE8
//引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...
- 移动端开发(四):swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- swiper.js插件的使用
swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html> <he ...
- swiper.animate--css3翻页动画
基于swiper 的 animate动画,适用于Swiper2.x和Swiper3.x . 1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate. ...
- css常用效果总结
1.给input的placeholder设置颜色 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:maroo ...
随机推荐
- elasticsearch启动常见问题
原文:https://blog.csdn.net/qq_22211217/article/details/80740873 一.Exception in thread "main" ...
- P4151 [WC2011]最大XOR和路径 线性基
题目传送门 题意:给出一幅无向图,求1到n的所有路径中最大异或和,一条边可以被重复经过. 思路: 参考了大佬的博客 #pragma GCC optimize (2) #pragma G++ optim ...
- echarts.min.js的引入
(1)使用地址引入 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></sc ...
- python入门学习一
本文用来记录学习python过程中所遇到的不同的或者记忆不清的一些定义. 注释 注释用# #此处是注释 n = 123 f = 456 不转义 Python中r‘ ’表示字符串默认不转义 print ...
- Python3-unittest测试框架之Mock接口联调
unittest测试框架之Mock接口联调 unittest.mock 是一个用于测试的Python库.它允许使用mock对象替换受测试系统的部分,并对它们如何已经被使用进行断言. Mock使用前提 ...
- Python查看文件属性
import os print(os.stat('my_module.py')) 输出: os.stat_result(st_mode=33188, st_ino=7348222, st_dev=16 ...
- Java中static关键字的定义
1.static存在的主要意义 static的主要意义是在于创建独立于具体对象的域变量或者方法.以致于即使没有创建对象,也能使用属性和调用方法! static关键字还有一个比较关键的作用就是 用来形成 ...
- leetcode-按奇偶排序数组II
Python解决方法: class Solution(object): def sortArrayByParityII(self, A): j = 1 for i in xrange(0, len(A ...
- Android中父View和子view的点击事件的执行过程
Android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解. 一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN- ...
- php开发面试题---Mysql常用命令行大全
php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...