首页 > 代码库 > swiper 、css3制作移动端网站，折叠导航

swiper 、css3制作移动端网站，折叠导航

2024-10-12 03:12:02   212人阅读

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

 

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

很多时候我总是感觉这个代码不适合我，我对这代码没有多大的兴趣，其实现在感觉也许因为我没有努力学习过的缘故吧，因为这样子发现不了代码的乐趣。工作两年有余了，很快就三年了，度过了新鲜期也该给自己的制定一下计划和目标了，不然就太大了（蓝瘦，香菇）。

 

swiper 、css3制作移动端网站，折叠导航


联系
我们