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 ...
随机推荐
- 保存属性至xml并读取
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- 2)PHP中把读取.txt中内容并转为UTF-8格式
<?php $filename = "filename.txt"; $handle = fopen($filename, "r");//读取二进制文件时, ...
- codeforces 547B. Mike and Feet 单调栈
题目链接 用单调栈计算出一个数字, 左边第一个比他小的数字的位置, 右边比第一个他小的数字的位置, 然后len = r[i] - l[i] +1. ans[len] = max(ans[len], a ...
- python进阶6 HTTP协议客户端实现
httplib 1.httplib 是 python中http 协议的客户端实现,可以使用该模块来与 HTTP 服务器进行交互. httplib的内容不是很多,也比较简单.以下是一个非常简单的例子,使 ...
- Highlighting an element as it is hovered over (like inspect element in FireBug) - jQuery Forum
Highlighting an element as it is hovered over (like inspect element in FireBug) - jQuery Forum Highl ...
- 在MySQL中创建实现自增的序列(Sequence)的教程
这篇文章主要介绍了在MySQL中创建实现自增的序列(Sequence)的教程,分别列举了两个实例并简单讨论了一些限制因素,需要的朋友可以参考下 项目应用中,曾有以下一个场景: 接口中要求发送一个int ...
- Android消息机制之Handler
Android为什么要提供Handler Android建议我们不要在UI线程中执行耗时操作,因为这很容易导致ANR异常(在Android源码中我们可以看到,UI如果对用户的操作超过5秒无响应,就会报 ...
- FMDB 直接将查询结果转化为字典
今天学习FMDB框架,发现非常好用的一点,就是就以把查询结果直接转化为字典 NSString *querySql = @"select * from stuInfo"; NSMut ...
- foundation 框架 NSString常用总结(二)
以此作为NSString常用总结(一)的补充 NSString* str = [NSString stringWithFormat:@"I love programing! You, com ...
- ##DAY7 UINavigationController
##DAY7 UINavigationController #pragma mark ———————UINavigationController——————————— 概括: 导航视图控制器也是一个视 ...