zoukankan      html  css  js  c++  java
  • Swiper实现导航栏滚动效果

    在制作h5移动端页面时经常遇到可以滚动的导航栏,下面是利用Swiper来实现的:

    1.引入相关插件

    <link rel="stylesheet" href="../css/swiper.css" >
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <script src="../js/swiper.js"></script>

    2、编写view(界面)

    <div class="box">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">首页</div>
                    <div class="swiper-slide">课程</div>
                    <div class="swiper-slide">评价</div>
                    <div class="swiper-slide">相册</div>
                    <div class="swiper-slide">教师</div>
                    <div class="swiper-slide">资讯</div>
                    <div class="swiper-slide">校区</div>
                    <div class="swiper-slide">关于</div>
                    <span></span>
                </div>
            </div>
        </div>

    3、编写style

    *{
         margin: 0;
         padding: 0;
     }
     .box{
          500px;
         height: 50px;
         border: 1px solid #000;
         margin: 100px auto;
     }
     .swiper-container{
          auto!important;
         height: 100%;
         text-align: center;
         line-height: 50px;
         color: #000;
         font-size: 20px;
     }
     .swiper-wrapper{
         position: relative;
          auto!important;
         height: 100%;
     }
     .swiper-slide {
         list-style: none;
         display: flex;
         justify-content: flex-start;
         flex-wrap: nowrap;
         cursor: pointer;
     }
     .swiper-wrapper span{
         position: absolute;
         height: 3px;
         background: #000;
         left: 1%;
         top: 85%;
     }
     .swiper-slide{
          auto!important;
         margin-right: 15px!important;
         padding: 0 18px;
     }

    为了让每个swiper-slide的宽度由内容撑起,右边显示一半是提示用户这个导航栏是可以滚动的,所以在初始化时要设置swiper的slidesPerView为auto,slidesPerView: “auto”, 同时要在css设置swiper-slide的样式为:

     .swiper-slide {
           auto !important;
          margin-right: 15px !important;
          padding: 0 18px;
      }

    4、编写js

    $(function () {
            $(".swiper-wrapper span").css({
                 $(".swiper-slide")[0].offsetWidth
            });
            let navScroll = new Swiper(".box .swiper-container", {
                freeMode: true,
                slidesPerView: "auto",
                freeModeMomentumRatio: 0.5,
                on: {
                    //当前swiper-slide点击时触发事件
                    click: function (e) {
                        let thisWidth = this.clickedSlide.offsetWidth;
                        let thisLeft = this.clickedSlide.offsetLeft;
                        let offsetX = this.width / 2 - thisLeft - thisWidth / 2;
                        //偏移量在1/2视口内时,容器不发生偏移
                        if (offsetX > 0) {
                            offsetX = 0;
                        }
                        //offsetX小于容器最大偏移时,让偏移量等于容器最大的偏移量
                        else if (offsetX < this.maxTranslate()) {
                            offsetX = this.maxTranslate();
                        }
                        //设置容器的过渡动画
                        this.setTransition(300);
                        this.setTranslate(offsetX);
                    }
                }
            });
        })
  • 相关阅读:
    CSS3点赞动画特效源码下载
    jQuery仿阿里云购买选择购买时间长度
    Ubuntu系统操作快捷键
    DIV+CSS颜色边框背景等样式
    HTML5翻页电子书
    淡蓝风格的手机登录HTML模板
    HTML常用符号
    SQL SERVER实例解析
    div+css页面右侧底部悬浮层
    C#引用C++代码
  • 原文地址:https://www.cnblogs.com/nljy/p/14591766.html
Copyright © 2011-2022 走看看