这段主要记录如何给排版完的页面加一些动画效果,用到了的插件有:

  • wow.min.js
  • jquery.singlePageNav.min.js
  • animate.css

  • 将导航条上对应的菜单和页面上对应的区域用jquery.singlePageNav.min.js联系起来,让导航跳转有平滑过渡的效果。

    选择器为带有各类名称的ul组合
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <!--将这个ul元素作为singlePageNav()的使用对象-->
<li><a href="#home">首页</a></li>
<li><a href="#bbs">论坛</a></li>
<li><a href="#html5">前端开发</a></li>
<li><a href="#course">最新课程</a></li>
<li><a href="#app">移动APP</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>

singlePageNav();参数中可以传入一个对象,其中offset值为动画过渡后向下偏移的量

$('.navbar .nav').singlePageNav({
offset:70
});
  • bootstrap.js这个文件中包含了一个bootstrap用的collapse函数,传入show或者hide参数可以让元素有下拉效果
$('.navbar-collapse').collapse("show");
$('.navbar-collapse').collapse("hide");
  • 给每个区块添加移入后的动画效果,用到animate.csswow.js

    1. 首先创建WOW()对象new WOW().init();
    2. 给需要添加的区块的class加上wow以及animate.css中的动画形式
    3. 下面给每一块添加动画,在加好wowclass之后,再加入以下属性
    • data-wow-duration动画持续时间data-wow-duration="2s"
    • data-wow-delay动画延迟多少时间执行 data-wow-delay="5s"
    • data-wow-offset偏移量data-wow-offset="10"距离可视区域多远开始执行动画
    • data-wow-iteration重复次数data-wow-iteration="10"

【巩固】bootstrap笔记二的更多相关文章

  1. bootstrap学习笔记<二>(标题,段落样式)

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

  2. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  3. Bootstrap笔记--快速入门

    首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...

  4. H5框架之Bootstrap(二)

    H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...

  5. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  6. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  7. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  8. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  9. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

随机推荐

  1. C++注意事项

    1.static和const不能同时修饰类的成员函数(static int getde()const;) 分析:原因在于const会在函数中添加一个隐式参数const this*,而static是没有 ...

  2. AI第二次作业

    2.9  设有如下语句,请用相应的谓词公式分别把它们表示出来: (1)有的人喜欢梅花,有的人喜欢菊花,有的人既喜欢梅花又喜欢菊花.      解:设 P(x): x是人      L(x,y): x喜 ...

  3. Ansible-Tower快速入门-4.以超级用户帐号登录【翻译】

    以超级用户帐号登录 首先,登录tower需要使用tower服务器所在的URL,格式如下:https://<tower server name>/ 注意:tower安装了一个自签名证书用于H ...

  4. 控制面板中java设置项如何删除

    卸载jdk或者jre后,如果控制面板中仍然有java项,重新安装可能仍然无法设置,提示找不到"javacpl.exe" 解决办法:删除C:\windows\system32\下的j ...

  5. 解决织梦DEDEcms指定arclist的特定ID排序的方法

    转载网址:http://blog.hrseo.net/xuexi/184.html 替换/include/taglib/arclist.lib.php这个文件,下载链接: http://pan.bai ...

  6. PPP 转义字符 编码 和 解码

    #include <stdio.h> #include <string.h> // PPP数据帧每一帧都以标识字符0x7E开始和结束: // 由于标识字符的值是0x7E,因此当 ...

  7. C++ 中queue(队列)的用法

    #include <iostream>#include <queue>#include <assert.h>/*调用的时候要有头文件: #include<st ...

  8. selenium 常见问题整理。

    一:日期控件 selenium不能直接对日期控件操作,可以通过js对日期控件做赋值操作 WebElement inputTimeBox=driver.findElement(by.name(" ...

  9. Json与javaBean之间的转换工具类

    /**  * Json与javaBean之间的转换工具类  *  * {@code 现使用json-lib组件实现  *    需要  *     json-lib-2.4-jdk15.jar  * ...

  10. Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...