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样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
随机推荐
- phpstorm中设置代码上传到github
参考: https://blog.csdn.net/Knight_quan/article/details/54894691 https://www.300168.com/biancheng/show ...
- 网络 --- 1 c/s （b/s）架构 ip 初始socket
一.c/s b/s c/s架构:客户端(client)/服务器(server) 软件cs架构:微信,陌陌,qq等 硬件cs架构:打印机 b/s架构:浏览器(browser)/服务器(server) ...
- Bootstrap3基础 input-group glyphicon 输入框组与glyphicon图标
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 螺旋折线（可能是最简单的找规律）【蓝桥杯2018 C/C++ B组】
标题:螺旋折线 如图p1.png所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0 ...
- vim使用跳转列表 jumps 来跟踪 (历史位置的)导航
参考: Vim使用跳转列表来跟踪你的导航,你可以通过这个列表来向前或者向后导航. 跳转列表保留所有地方的轨迹,它可以跟踪文件名.行号和列号. 查看调整列表::jumps 导航键 描述 CTRL-o 跳 ...
- P2761 软件补丁问题
P2761 软件补丁问题 思路 貌似不用网络流,直接状态压缩 用spfa跑最短路,直接判断是否能过 位运算太渣了,WA了好几发 代码 #include <bits/stdc++.h> us ...
- FJUT3591 侦测到在途的聚变打击（最小不可相交路径覆盖）题解
题意:给你n个点,点间m条路,给出在每条路要走的时间.现在有q个任务,要摧毁q个点,每次提供ci和ti表示在时间ti摧毁点ci(必须正好在时间ti才能摧毁),每个点可能需要多次摧毁(同一时间能在同一个 ...
- （转）tomcat架构&session共享
(二期)16.tomcat的整体架构与session共享方案 [课程16]tomcat...共享.xmind47.6KB [课程16]tomcat...流程.xmind0.6MB [课程16]tomc ...
- 题解——洛谷P1962 斐波那契数列（矩阵乘法）
矩阵乘法加速线性递推的典型 大概套路就是先构造一个矩阵\( F \)使得另一初始矩阵\( A \)乘以\( F^{x} \)能够得出第n项 跑的飞快 虽然我也不知道那个矩阵要怎么构造 或许就像我使用了 ...
- [nginx] - 使用nginx实现反向代理,动静分离,负载均衡,session共享
反向代理概念 先说正向代理,比如要访问youtube,但是不能直接访问,只能先找个FQ软件,通过FQ软件才能访问youtube. FQ软件就叫做正向代理.所谓的反向代理,指的是用户要访问youtube ...