麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用

1.源码笔记

我的源码+笔记（很重要）：链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2

感谢麦子学院项目相关视频：链接: https://pan.baidu.com/s/1eR2qnv0 密码: 8z9x

2.部分页面展示

3. 满意的效果插件

记得导入插件文件

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.singlePageNav.min.js"></script>

<script src="js/wow.min.js"></script>

<script>

$(function(){

/*导航跳转效果插件*/

$('.nav').singlePageNav({

offset:70    /*导航高度*/

});

/*小屏幕导航点击关闭菜单*/

$('.navbar-collapse a').click(function(){

$('.navbar-collapse').collapse('hide');

});

new WOW().init();

})

</script>

jquery.singlePageNav.min.js

wow.min.js和animate.css组合使用

http://wow.jsbootku.com

http://daneden.github.io/animate.css/

1. js添加  new WOW().init();
2. 给使用对象添加class="wow + animate"

效果展示：复制那个animate单词到class需要的即可；animate.css：http://daneden.github.io/animate.css/

1. 可用属性

data-wow-duration（动画持续时间）

data-wow-delay（动画延迟时间）

data-wow-offset（偏移量）本动画距离可视区域多远开始执行动画

data-wow-iteration="10"(重复次数)

eg：

<section id="home">

<div class="lvjing">

<div class="container">

<div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s" "data-wow-offset ="200"

data-wow-iteration="2">

<div class="row wow shake" data-wow-offset ="200" data-wow-iteration="2">

【作者】：轻轻走143

【出处】：http://www.cnblogs.com/qingqingzou-143/

【声明】：欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！