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样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
随机推荐
- Python之字符编码（一）
一.了解字符编码的知识储备? 1.计算机基础知识? 计算机中所有的软件文件(包括:操作系统)都存储在硬盘,启动计算机,计算机需要把系统文件都去到内存中. 2.文本编辑器存取文件的原理(nodepad+ ...
- yum all installed dependent packages while removing a package in centos 7?
how to remove all installed dependent packages while removing a package in centos 7? # yum history # ...
- 安装搭建Python2.* 和3.* 环境详细步骤
Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上. 安装Python 首先进入Python官方网站,将Python下载下来. win7安装python 在官网 ...
- NOIP 2016 换教室 (luogu 1850 & uoj 262) - 概率与期望 - 动态规划
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq i \leq n1≤ ...
- topcoder srm 713 div1
problem1 link 如果$a^{b}=c^{d}$,那么一定存在$t,x,y$使得$a=t^{x},c=t^{y}$.一旦$t,x,y$确定,那么可以直接计算出二元组$b,d$有多少.对于$t ...
- Linux 系统/etc/profile 内配置 系统脚本命令
背景 在Linux系统下,我们需要利用脚本命令启动一个进程的时候,需要先找到找到启动文件,然后再启动.比如服务器上安装了一个was应用服务器,我们需要每次启动服务器都需要使用如下命令: sh was ...
- Docker 入门指南——部署常用服务示例
MongoDB FROM centos:centos7 MAINTAINER The CentOS Project <cloud-ops@centos.org> RUN yum -y up ...
- 重要, 要播放音乐视频等多媒体: 安装fedora23中的多媒体编码器
区分: 大多数用户和高级用户? 删除 dnf remove software-name 启动软件管理器: gnome-software. 要删除系统 "自带的" 软件, 如empt ...
- Python入门 值内存管理与所有的关键字
值内存管理 Python采用的是基于值得内存管理方式,如果为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址. id(x) : 用于返回变量所指值的内存地址 x = 3 pri ...
- vs添加webservice
VS2010中添加WebService注意的几个地方 添加web引用和添加服务引用有什么区别? 2.4.1 基础知识——添加服务引用与Web引用的区别 C#之VS2010开发Web Service V ...