swiper,animate使用方法
1、先链接css和js文件
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
2、初始化
/* 初始化swiper.js */
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination', //分页器
direction:'vertical', //垂直方向换页
slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1 /* 初始化animate */
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
setTimeout(function(){ //2s后开始运行动画(移动端总是没加载完图片就开始动画了。。。。。)
swiperAnimate(swiper); //初始化完成开始动画
},2000)
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
4、使用animate的动画,注意class中要加“ani”
<img class="ani pic" src="pic.jpg" swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" />
自定义的动画效果:
html中添加class=“ani” 和swiper-animate-effect=“动画名”,可以与animate自带的动画一样,在每次切换时运行动画。
<img class="ani pic" src="pic.jpg" swiper-animate-effect="shutter2" />
css中定义效果
@-webkit-keyframes shutter2{
from{top: 100%;}
to{top:;}
}
.shutter2{
-webkit-animation: shutter2 0.5s forwards;
animation: shutter2 0.5s forwards;
}
API地址: http://www.swiper.com.cn/api/start/2014/1218/140.html
swiper,animate使用方法的更多相关文章
- Swiper教程 —— 使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- 微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...
- 使用swiper.animate时,给一个对象添加两个动画且动画循环的方法
swiper官网上给对象加一个动画的方法是 <div class="swiper-slide"> <p class="ani" swiper- ...
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
- Swiper.js使用方法
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href=" ...
- js文件中模块化导入swiper.js文件方法
es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...
- animate使用方法
链接:https://www.cnblogs.com/xiaohuochai/p/7372665.html
- css常用效果总结
1.给input的placeholder设置颜色 .phColor::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:maroo ...
随机推荐
- javaTemplates-学习笔记一
第一步,下载Java运行环境-JDK JDK -'1.8.0_25'[附链接地址] 安装JDK配置环境 安装好jdk,然后配置环境变量.不同系统配置环境变量百度Google之,附上WIN8配置方法[J ...
- 不包含任何UserControl
奇怪了,以前做控件的时候都没有这个问题,哎,又堕落了1年,什么都忘了 创建自定义控件 可以继承现有控件,也可以继承userContrl类,但是现在有个问题 很多网上的资料说,啊,直接创建一个自定义控件 ...
- bzoj 2141 : 排队 分块
题目链接 2141: 排队 Time Limit: 4 Sec Memory Limit: 259 MBSubmit: 1169 Solved: 465[Submit][Status][Discu ...
- 随机数、continue、break
arc4random() — 返回一个随机数(无符号整型). 如果要随机一个 [a, b]范围内的整数 公式:arc4random() % (b - a + 1) + a; #include &l ...
- HTML5速查表
HTML5速查表 标签 描述 版本 属性 <!--...--> 定义注释 4 / 5 none <!DOCTYPE> 定义文档类型 4 / 5 none <a> 定 ...
- Linux发展历史大事编年表(截止2013年)
这篇文章主要介绍了Linux发展历史大事编年表(截止2013年),Linux现在已经无处不在,是一个伟大的开原项目,让我一起来看看23年来它的发展历程吧 我们周围到处都有Linux的身影,在家中. ...
- 转: javascript模块加载框架seajs详解
javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...
- 使用自定义脚本扩展程序自动执行 VM 自定义任务
在 Build 开发者大会上推出VM 扩展程序的其中一个称为"自定义脚本扩展程序",它支持 PowerShell.如果这是您第一次访问这些博客,可能需要查看以前的博客,请单击 ...
- HDU 5875 Function(ST表+二分)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5875 [题目大意] 给出一个数列,同时给出多个询问,每个询问给出一个区间,要求算出区间从左边开始不 ...
- SpringMVC入门一:helloWorld
玩了一下SpringMVC, 感觉挺清爽的 好像没有struts那么臃肿( 可能是高级的东西我还不会用 哈 ) 例子中一共有俩方法: 一个Controller直接返回字串的方法, 另一个通过Dao层返 ...