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样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
随机推荐
- 【题解】Luogu UVA12345 Dynamic len(set(a[L:R]))
原题传送门 这题要用动态莫队,我博客里有介绍 这道题和luogu P1903 [国家集训队]数颜色 / 维护队列差不多,解法就在上面那篇博客里qaq 主要的问题是如何排序? 排序有三个关键字: 1.左 ...
- 20145308 《网络对抗》 MSF基础应用 学习总结
20145308 <网络对抗> MSF基础应用 学习总结 实验内容 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.具体需要完成(1)一个主动攻击,如ms08_067 ...
- 使用SSH框架遇到的错误总结
1.org.hibernate.exception.ConstraintViolationException: could not insert: 如果是主键是自增序列,映射文件 指定主键生成器< ...
- python --- 11 第一类对象 函数名 闭包 迭代器
一 .函数名的运用 ①函数名是⼀个变量, 但它是⼀个特殊的变量, 与括号配合可以执⾏函数的变量 ②函数名是一个内存地址 ③ 函数名可以赋值给其他变量 ④函数名可以当做容器类 ...
- Flutter基础用法解析
解析开始 Flutter中一切皆widget,一切皆组件.学习Flutter中,必须首先了解Flutter的widget.先从最基本的MaterialApp和Scaffold开始了解 1 Materi ...
- Docker 使用Docker-Compose编排容器
简介: Docker Compose是一个用来定义和运行复杂应用的Docker工具.一个使用Docker容器的应用,通常由多个容器组成.使用Docker Compose不再需要使用shell脚本来启动 ...
- 2、iptables基本应用
iptables:规则管理工具 添加.修改.删除.显示等: 规则和链有计数器: pkts: 由规则或链所匹配到的报文的个数: bytes:由规则或链匹配到的所有报文大小之和: iptables命令: ...
- Git 分支 - 远程分支
Git 分支 - 远程分支 远程分支 远程分支(remote branch)是对远程仓库中的分支的索引.它们是一些无法移动的本地分支:只有在 Git 进行网络交互时才会更新.远程分支就像是书签,提醒着 ...
- Python深入：Distutils发布Python模块--转载
https://blog.csdn.net/gqtcgq/article/details/49255995 Distutils可以用来在Python环境中构建和安装额外的模块.新的模块可以是纯Pyth ...
- RN返回navigation方法
RN官方指定的路由管理是navigation 通过打印我们可以得到navgation的相关属性 1:dispatch ,Redux的事件发起 2:goback()返回 3:navigate(rout ...