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

 

其实这个项目并无什么实际上的干活分享，无非给我本身作个懒惰的警醒罢了，代码长时间不去写，就会生疏，基础很重要。

不少时候我老是感受这个代码不适合我，我对这代码没有多大的兴趣，其实如今感受也许由于我没有努力学习过的缘故吧，由于这样子发现不了代码的乐趣。工做两年有余了，很快就三年了，度过了新鲜期也该给本身的制定一下计划和目标了，否则就太大了（蓝瘦，香菇）。