我用swiper和jquery写了一个导航小demo,在移动端点击不能跳转(不懂得地方我加了注释)

cc1596479381 发布于 2017/06/12 15:41
阅读 732
收藏 0

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />
    <title>导航左右滚动,跳转切换 </title>
    <!-- 这里需要下载swiper的样式  https://pan.baidu.com/s/1bpmZd6Z 和HTML放同级就可以了-->
    <link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<style>
    *{ margin:0; padding:0; font-family: "微软雅黑";}
    body{ font-size:16px; background-color:#f4f4f4;}
    li{ list-style:none;}
    a{ text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0);}
    .wrap{width:100%;}

    /*导航滑动*/
    #topNav {
        width: 100%;
        overflow: hidden;
        font-style:normal;
        font-variant-ligatures: normal;
        font-variant-caps: normal;
        font-variant-numeric: normal;
        font-weight: normal;
        font-stretch: normal;
        font: 0.35rem;
        line-height: 100%;
        background: #34026A;
    }
    #topNav .swiper-slide {
        width:20%;
        text-align:center;
        padding-left: 1%;
        padding-right:1%;
        border-right-style: dotted;
    }
    #topNav .swiper-slide a div{
        transition:all .3s ease;
        display:block;
        color: #fff;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        padding-bottom: 10%;

    }
    #topNav .active a .sport{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#FF8D14,#FFBA34);
        border-radius: 15px 15px 0 0;
    }
    #topNav .active a .mw{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#008754,#00B75A);
        border-radius: 15px 15px 0 0;
    }
    #topNav .active a .bd{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#712EEC,#3497E9);
        border-radius: 15px 15px 0 0;
    }
    #topNav .active a .sp{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#F84387,#F95ACB);
        border-radius: 15px 15px 0 0;
    }
    #topNav .active a .mh{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#BD00E0,#B152F5);
        border-radius: 15px 15px 0 0;
    }
    #topNav .active a .bh{
        transform:scale(1.1);
        background-image:linear-gradient(to top,#FA552F,#FC7E4B);
        border-radius: 15px 15px 0 0;
    }

    /*导航悬浮固定*/
    .tabFloat{ position:fixed; top:0; left:0; z-index:100;}

    /*主体内容样式*/
    #div1{
        background: yellow;
        height: 37.5rem;
        text-align: center;
    }
    #div2{
        background: green;
        height: 37.5rem;
        text-align: center;
    }
    #div3{
        background: blue;
        height: 37.5rem;
        text-align: center;
    }
    #div4{
        background: rgb(248,76,161);
        height: 37.5rem;
        text-align: center;
    }
    #div5{
        background: rgb(187,16,228);
        height: 37.5rem;
        text-align: center;
    }
    #div6{
        background: rgb(251,100,57);
        height: 37.5rem;
        text-align: center;
    }


    @media screen and (max-width:334px){
        .swiper-slide a div{ font-size:10px;}
    }
</style>
<body>
    <div class="wrap">
        <div id="topNav" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide ">
                    <a class="link" >
                        <div  class="sport">第一模块</div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a class="link1">
                        <div  class="mw">第二模块</div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#div3">
                        <div  class="bd">第三模块</div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#div4">
                        <div  class="sp">第四模块</div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#div5">
                        <div  class="mh">第五模块</div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#div6">
                        <div  class="bh">第六模块</div>
                    </a>
                </div>
            </div>
        </div>
        <div class="tabSection" id="div1">
            这是第一块
        </div>
        <div class="tabSection" id="div2">
            这是第二块
        </div>
        <div class="tabSection" id="div3">
            这是第三块
        </div>
        <div class="tabSection" id="div4">
            这是第四块
        </div>
        <div class="tabSection" id="div5">
            这是第五块
        </div>
        <div class="tabSection" id="div6">
            这是第六块
        </div>
    </div>
</body>
<!-- 这里可能需要下载swiper   https://pan.baidu.com/s/1boPY5bx 和HTML放同级就好了-->
<script src="swiper-3.4.2.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
  //swiper部分,为了各位方便复制我就写到一个页面中
  var mySwiper = new Swiper('#topNav', {
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      slidesPerView: 'auto',
  });

  swiperWidth = mySwiper.container[0].clientWidth
  maxTranslate = mySwiper.maxTranslate();
  maxWidth = -maxTranslate + swiperWidth / 2

  $(".swiper-container").on('touchstart', function(e) {
      e.preventDefault()
  })

  mySwiper.on('tap', function(swiper, e) {

    //  e.preventDefault()

    slide = swiper.slides[swiper.clickedIndex]
    slideLeft = slide.offsetLeft
    slideWidth = slide.clientWidth
    slideCenter = slideLeft + slideWidth / 2
        // 被点击slide的中心点

        mySwiper.setWrapperTransition(300)

        if (slideCenter < swiperWidth / 2) {

            mySwiper.setWrapperTranslate(0)

        } else if (slideCenter > maxWidth) {

            mySwiper.setWrapperTranslate(maxTranslate)

        } else {

            nowTlanslate = slideCenter - swiperWidth / 2

            mySwiper.setWrapperTranslate(-nowTlanslate)

        }

        $("#topNav  .active").removeClass('active')

        $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')

        $("#topNav .swiper-slide").eq(swiper.clickedIndex)

    })
    //jquery部分
    $(document).ready(function(){
        $("html,body").animate({scrollTop:0});
            //判断导航个数
            var tabLength = $('.swiper-slide a').length;

            //导航高度
            var tabTop = $("#topNav").offset().top;
             // console.log(tabTop)
            //分类数组 把每个模块的高度放进sectop中
            var secTop = new Array();
            $(".tabSection").each(function(index) {
                secTop.push($(this).offset().top);
            });

            $(window).scroll(function(){
                var winScrollTop = $(window).scrollTop();
                //悬浮导航
                if(winScrollTop >= tabTop){
                    $("#topNav").addClass("tabFloat");
                }else{
                    $("#topNav").removeClass("tabFloat");
                }


                //切换导航
                if(winScrollTop >= secTop[secTop.length-1]-100){
                    $("#topNav  .active").removeClass('active')
                    $("#topNav .swiper-slide").eq(secTop.length-1).addClass('active')
                }else  if(winScrollTop < secTop[0]-100){
                    $("#topNav  .active").removeClass("active");
                }else{
                    for(i = 0 ; i < secTop.length-1 ; i++){
                        if(winScrollTop >= secTop[i]-100 && winScrollTop < secTop[i+1]-100){
                            $("#topNav  .active").removeClass("active");
                            $("#topNav  .swiper-slide").eq(i).addClass("active");
                        }
                    }
                }

            });


        // 就这个地方当我用谷歌的调试工具模拟手机时发现这里的事件没有执行
        //滚动到对应专区
        $('.swiper-slide').each(function(index) {
            $(this).click(function(){
                var scrollHeight = $(".tabSection").eq(index).offset().top;
                $("html,body").animate({scrollTop:scrollHeight-40});
            });
        });
    });
</script>
</html>

加载中
返回顶部
顶部