css动效库animate.css和swiper.js
animate.css
https://daneden.github.io/animate.css/
学习的文档：http://www.jq22.com/jquery-info819
腾讯团队的JXanimate
http://alloyteam.github.io/JXAnimate/index.html
swiper.js中的hashnav这个属性没看懂。
swiper.js 的学习笔记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height: 100%;
overflow: hidden;
}
.ab{
position: absolute;
}
img{
width: 100%;
}
.swiper-container {
width: 400px;
height: 600px;
margin:0 auto;
}
.swiper-container .swiper-wrapper{
width: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide{
overflow: hidden;
}
</style>
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1" style="background:#FF7F24">
<p class="ani infinite" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.3s">
<img src="./down.jpg" style="width: 30px">
</p>
</div>
<div class="swiper-slide slide2" style="background: #FF6A6A">
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide slide2_1"></div>
<div class="swiper-slide slide2_1"></div>
</div>
</div>
</div>
<div class="swiper-slide slide3" style="background: #FFE7BA">
<div class="swiper-container3">
<div class="swiper-wrapper">
<div class="swiper-slide slide2_1"></div>
<div class="swiper-slide slide2_1"></div>
</div>
</div>
</div>
<div class="swiper-slide slide4" style="background: #FF34B3">
<div class="swiper-container4">
<div class="swiper-wrapper">
<div class="swiper-slide slide4_1"></div>
<div class="swiper-slide slide4_1"></div>
</div>
</div>
</div>
<div class="swiper-slide slide5" style="background: #EEEEE0">
<div class="swiper-container5">
<div class="swiper-wrapper">
<div class="swiper-slide slide5_1"></div>
<div class="swiper-slide slide5_1"></div>
</div>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
hashnav:true
})
</script>
</body>
</html>
css动效库animate.css和swiper.js的更多相关文章
- 前端必须收藏的CSS3动效库！！！
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 【总结】前端必须收藏的CSS3动效库！！！
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- CSS动效集锦，视觉魔法的碰撞与融合（二）
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- iOS开发Facebook POP动效库使用教程
如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能 ...
- Facebook POP动效库使用教程
编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- js+css 动效+1的效果
点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...
- CSS动效集锦，视觉魔法的碰撞与融合（三）
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...
- CSS动效集锦，视觉魔法的碰撞与融合（一）
前言 在本文中我讲述了7种CSS的动效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
随机推荐
- cscope for golang
从 https://gist.github.com/bopjiang/11146574 下载, 做了修改. cscope-go.sh #!/bin/bash # generate cscope ind ...
- Codeforces 765F Souvenirs - 莫队算法 - 链表 - 线段树
题目传送门 神速的列车 光速的列车 声速的列车 题目大意 给定一个长度为$n$的序列,$m$次询问区间$[l, r]$内相差最小的两个数的差的绝对值. Solution 1 Mo's Algorith ...
- 【python017--函数对象1】
一.函数 1.定义函数:def 函数名(): 2.调用函数:直接写函数的名称() >>> def MyFirstFunction(): print('this my firs ...
- python ---24 正则表达式 re模块
一.正则表达式 1.字符组 ① [abc] 匹配a或b或c ② [a-z] 匹配a到z之间的所有字⺟ [0-9]匹配所有阿拉伯数字 2.元字符 3.量词 4.重要搭配 ① .*? ② .*?x ...
- uniGUI试用笔记（五）
uniGUI的主窗体可以采用多页面方式进行管理,参考网上的资料,都是用TUniFrame + TUniPageControl 来实现,尝试了一下,效果还不错,如下图: 用TUniFrame 能够使用继 ...
- Flask学习【第6篇】：Flask中的信号
实例化补充 instance_path和instance_relative_config是配合来用的.这两个参数是用来找配置文件的,当用app.config.from_pyfile('settings ...
- vi如何设置自动缩进?
答: tab 空格数设置为4,加入以下五行到~/.vimrc即可 set smartindent set tabstop= set shiftwidth= set expandtab set sof ...
- luoguP4072 [SDOI2016]征途
[SDOI2016]征途 大体 大概就是推推公式,发现很傻逼的\(n^3\)DP get60 进一步我们发现状态不能入手,考虑优化转移 套个斜率优化板子 每一层转移来一次斜率优化 思路 先便便式子 \ ...
- SpringBoot 解决HttpServletRequest只能读取一次
业务逻辑,通过filter读取请求的request,获取token,并将token传递后面流程使用 BodyReaderHttpServletRequestWrapper: public class ...
- ZOJ 3829 Known Notation（贪心）题解
题意:给一串字符,问你最少几步能变成后缀表达式.后缀表达式定义为,1 * 1 = 1 1 *,题目所给出的字串不带空格.你可以进行两种操作:加数字,交换任意两个字符. 思路:(不)显然,最终结果数字比 ...