最新消息:欢迎大家来到小月博客

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

web前端 小月 1140浏览 0评论

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

 

前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目。下图就是这个项目完成的效果。

swiperNav

 

  • 问题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制作移动端网站,折叠导航

一点心意×
 收藏 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (18)

  1. 把愉快的心情带给你,把美好的幸福分给你,把甜蜜的日子寄给你,把衷心的祝福送给你。轻轻地一声祝福,祝朋友幸福、快乐! 生命的美丽,好似一朵鲜花,每天的心情,像是一幅油画,生活的笑容,那是彩色的云霞,朋友的温馨,是我永远的牵挂,祝福你一生:让笑永驻,让友情永存,让美好永恒!
    增达网5个月前 (06-03)回复
  2. 相当精彩的博客!
    衣皇后5个月前 (06-05)回复
  3. 好好学习,天天向上
    11764480285个月前 (06-09)回复
  4. 好好学习,天天向上
    5301447065个月前 (06-09)回复
  5. 好几年没用过博客了,支持下!
    直销4个月前 (06-13)回复
  6. 爷,收下我的膝盖!
    增达网逆向直销网赚4个月前 (06-14)回复
  7. 没玩过博客,感觉还挺好玩!
    增达网QQ-330922904个月前 (06-15)回复
  8. 你这个代码要是完整的共享就好了!!!
    冷知识4个月前 (06-18)回复
    • 有不懂的地方吗?如果有需要可以发给你的
      小月4个月前 (06-23)回复
  9. 这个不错哦,我好好读读!
    网赚4个月前 (06-22)回复
  10. 黑寡妇很反感韩国太烦人
    8761个月前 (09-16)回复
    • 反倒是热舞热舞热
      8761个月前 (09-16)回复
    • 发过的郭德纲
      8761个月前 (09-16)回复
      • 割肉疼痛他热儿童儿童二热
        8761个月前 (09-16)回复
  11. 脚印。。。
    谢明璋1周前 (10-13)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册