麥子學院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/

【聲明】：歡迎轉載，但請在顯要位置顯示本文鏈接，並保留本段聲明，否則追究法律責任，謝謝！