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样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
随机推荐
- MQ选型对比RabbitMQ RocketMQ ActiveMQ Kafka（外加redis对比及其实现）
rocketmq 4.3开始支持事务https://www.cnblogs.com/hzmark/p/rocket_txn.html 参考:rabbitMQ.activeMQ.zeroMQ.Kafka ...
- Python3+Dlib实现简单人脸识别案例
Python3+Dlib实现简单人脸识别案例 写在前边 很早很早之前,当我还是一个傻了吧唧的专科生的时候,我就听说过人脸识别,听说过算法,听说过人工智能,并且也出生牛犊不怕虎般的学习过TensorFl ...
- bzoj 2434 阿狸的打字机 - Aho-Corasick自动机 - 树状数组
题目传送门 传送站I 传送站II 题目大意 阿狸有一个打字机,它有3种键: 向缓冲区追加小写字母 P:打印当前缓冲区(缓冲区不变) B:删除缓冲区中最后一个字符 然后多次询问第$x$个被打印出来的串在 ...
- 动态规划之97 Interleaving String
题目链接:https://leetcode-cn.com/problems/interleaving-string/description/ 参考链接:https://blog.csdn.net/u0 ...
- IIC学习
1 概述: IIC是用两条双向的线,一条SDA(serial data line),一条SCL(serial clock). SCL:上升沿将数据输入到每个EEPROM器件中,下降沿驱动EEPROM器 ...
- html的初了解（更新中···）
(注:在学习时要养成一个良好的习惯,即每次写完都随手保存,快捷键为ctrl+s.即每次写完都随手点一下ctrl+s.) html是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言. 网页的 ...
- tp框架中的一些疑点知识-2
tp中有三种常量: 预定义常量, 这个设置后不会随环境的改变而改变的,比如'URL_MODEL' => 1 注意是 model, 不是 url_mode 路径常量, 也不会随环境的改变而改变的, ...
- HDU 4366 Successor（dfs序 + 分块）题解
题意:每个人都有一个上司,每个人都有能力值和忠诚值,0是老板,现在给出m个询问,每次询问给出一个x,要求你找到x的所有直系和非直系下属中能力比他高的最忠诚的人是谁 思路:因为树上查询很麻烦,所以我们直 ...
- Java内存模型原理总结（转自51CTO）
转载地址:http://developer.51cto.com/art/201811/587220.htm [51CTO.com原创稿件]这篇文章主要介绍模型产生的问题背景,解决的问题,处理思路,相关 ...
- hihoCoder week19 RMQ问题再临-线段树 单点更新 区间查询
单点更新 区间查询 #include <bits/stdc++.h> using namespace std; #define m ((l+r)/2) #define ls (rt< ...