swiper 、css3製做移動端網站，摺疊導航

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'
    });
});

 

其實這個項目並無什麼實際上的幹活分享，無非給我本身作個懶惰的警醒罷了，代碼長時間不去寫，就會生疏，基礎很重要。

不少時候我老是感受這個代碼不適合我，我對這代碼沒有多大的興趣，其實如今感受也許由於我沒有努力學習過的緣故吧，由於這樣子發現不了代碼的樂趣。工做兩年有餘了，很快就三年了，度過了新鮮期也該給本身的制定一下計劃和目標了，否則就太大了（藍瘦，香菇）。