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

随机推荐

在见证了1000多家公司的兴衰灭亡之后，YC创始合伙人总结了创业公司的6个不死法则（转）
今天,我想先说一下个人消息.在 YC 工作了 11 年之后,我明年想去休假.我希望把精力放在一些项目上,说实话,我有点累了. YC 是这世界上我最喜欢的事情之一,但它也很费精力. 11 年不间断的耗费 ...
为什么预处理和参数化查询可以防止sql注入呢?
在传统的写法中,sql查询语句在程序中拼接,防注入(加斜杠)是在php中处理的,然后就发语句发送到mysql中,mysql其实没有太好的办法对传进来的语句判断哪些是正常的,哪些是恶意的,所以直接查询的 ...
STM32的FLASH ID加密
#define FLASH_ID_OFFSET 30000 //任意定义一个数 //把地址直接减去或者加上一个数是不要程序中直接出现这个地址 volatile u32 Flash_ID_addr ...
比较实用的前端 js框架 ,组件汇总
一.js 前端ui框架 Kendo UI 商用收费,组件丰富,界面简洁美观,有jQuery和angular两个js的版本 Webix 商用收费,组件丰富,界面特别美观 JQwidgets 商用收费,丰 ...
topcoder srm 545 div1
problem1 link 这个可以贪心地从前向后构造.假设当前已经的字符串为$S$,对于一个字符$c$来说,设将$c$加到$S$后得到的新串为$S^{'}$.那么如果$X+Y+Z \ge minIn ...
Spring 学习历程（二）
JUnit测试 maven导入包  <dependency> &l ...
CentOS Yum 源搭建
创建yum源服务,主要用到了两个软件createrepo和httpd.前者是创建yum源索引的工具,后者是提供文件在线流浪的功能,当然,除了httpd之外,你也可以使用nginx替代. creater ...
dede的使用-2
自己开发站点的规律, 跟cms开发的规律应该是一样的, 而且应该学习和借鉴cms的开发规律方法和思想.比如也要分站点的内容性质, 是文章类站点, 还是图片类, 还是shopping类等. 也要分栏目. ...
【Finchley】【升级变更】Spring Cloud 升级到Finchley版本后需要注意的地方
Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级. 升级前 ...
(转) The care and maintenance of your adviser
The care and maintenance of your adviser Ever since the advent of graduate school, students have com ...

css动效库animate.css和swiper.js

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

随机推荐

热门专题