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样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...

随机推荐

roon
http://www.sthifi.com/Article/ViewArticle.asp?id=10895 http://kb.roonlabs.com/LinuxInstall https://c ...
使用nc命令传输文件和文件夹
相比较常用的scp,nc命令传文件不需要建立ssh连接和输入密码,方便快捷:尤其是在只能用key登录的机器上: 传文件: 先在目标机器执行命令准备好接收(1221为任意可用端口) nc -l 1221 ...
indexOf()/equals/contains
indexOf():对大小写敏感定义:返回某个指定字符串值在字符串中首次出现位置用法:返回字符中indexof(string)中字串string在父串中首次出现的位置,从0开始!没有返回-1:方便判断 ...
android之进度条
xml引用 <ProgressBar android:id="@+id/pb_progressbar" style="@style/StyleProgressBar ...
VC++ 使用CreateProcess创建新进程
https://www.cnblogs.com/fancing/p/6477918.html #include <windows.h> #include <tchar.h> # ...
FireMonkey 源码学习（1）
FireMonkey采用了与VCL不同的机制,很多基础类已经重新编写了,好在一如既往地提供了源代码,故此有机会学习一下. 一.图形引擎 FireMonkey采用了纯图形化技术解决可视化控件,而不是使用 ...
Python3基础 dict 创建字典空字典
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
shell编程中的单/双小括号, 中括号, 大括号
linux shell中的变量类型?分字符串或者数字或者bool类型吗? 参考: http://www.cnblogs.com/nufangrensheng/p/3477281.html 不分! sh ...
bzoj1565: [NOI2009]植物大战僵尸最大权闭合子图，tarjan
bzoj1565: [NOI2009]植物大战僵尸链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1565 思路很容易的想到最大权闭合子图 ...
codevs1017乘积最大
codevs1017 乘积最大题目描述 Description 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场 ...

css动效库animate.css和swiper.js

css动效库animate.css和swiper.js的更多相关文章

随机推荐

热门专题