swiper 、css3制作移動端網站，折疊導航

前幾天公司要更新改版移動端的官網，由於網站本身沒有多少內容，所以設計師就做成了整屏滑動的樣子，起初我並沒有看設計稿就一口答應了，拿到手后發現了幾個問題讓我不知道選用fullpage還是選擇swiper來寫這個項目。下圖就是這個項目完成的效果。

 

• 問題1：整屏滑動兩個插件都可以用，但是移動端用swiper偏多的
• 問題2：網站的導航要隨着頁面更新跳轉 這里fullage還是很實用的
• 問題3：我想用swiper卻不是很熟悉swiper怎么制作導航（平時不怎么研究代碼的緣故了）

其實每個問題單獨拿出來都不難，但是放到一起就有些復雜了，所以書到用時方恨少一點也不假，平時項目少自己也比較懶什么也不努力學習… …  不過最后仔細看了看swiper，雖然沒有單獨去介紹怎么用swiper寫導航但是輪播圖的效果理論是一樣的，所以就結合JQ實現了這個導航制定跳轉的效果，代碼如下：

html部分：

<div class="nav">
    <span class="logo">
        <img src="img/logo_03.png">
    </span>
    <span class="nav_title">首頁</span>
    <span class="nav_btn nav_btn_out">
        <img src="img/daohang_06.png" />
    </span>
</div>
<ul class="nav_list">
    <li>首頁</li>
    <li>二手房砍價師</li>
    <li style="display: none;">二手房砍價師</li>
    <li style="display: none;">二手房砍價師</li>
    <li>咨詢專家</li>
    <li>聯系我們</li>
</ul>

 

JS部分

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    mousewheelControl : true,
    onInit: function(swiper){
       swiperAnimateCache(swiper);
       swiperAnimate(swiper);
    },
    onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper);
        $(".nav_title").text($('li').eq(swiper.activeIndex).html());   //這里是更改標題欄的名字
    } 
 });

 

當點擊導航欄的時候

$('li').click(function(){
    swiper.slideTo($(this).index(), 1000) //這里是重要的地方，也是控制了導航指定跳轉的代碼
    $(".nav_title").text($(this).html());
    $(".nav_list").animate({
        height:'toggle'
    });
    $(".nav_btn").toggleClass("nav_btn_click nav_btn_out");
});

// 這里是控制導航折疊和反轉的效果
$(".nav_btn").click(function(){
    $(this).toggleClass("nav_btn_click nav_btn_out");
    $(".nav_list").animate({
        height:'toggle'
    });
});

 

其實這個項目並沒有什么實際上的干活分享，無非給我自己做個懶惰的警醒罷了，代碼長時間不去寫，就會生疏，基礎很重要。

很多時候我總是感覺這個代碼不適合我，我對這代碼沒有多大的興趣，其實現在感覺也許因為我沒有努力學習過的緣故吧，因為這樣子發現不了代碼的樂趣。工作兩年有余了，很快就三年了，度過了新鮮期也該給自己的制定一下計划和目標了，不然就太大了（藍瘦，香菇）。