xl1090453281
2019-05-15 15:55
采纳率: 93.8%
浏览 962

js,jq怎么实现使多出的div先隐藏然后向左滑动显示

如图,一张钥匙牌是一个div,不是一张图片。向左滑动显示其余的牌,左边多余的就隐藏,麻烦上一下代码,十分感谢!图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • yumiaoMM 2019-05-15 17:30
    已采纳

    例如:
    html:


    卡牌1

    卡牌2

    卡牌3

    卡牌4

    卡牌5

    卡牌6


    css:
    .container {
    width: 500px;
    height: 60px;
    display: flex;
    overflow-x:scroll;
    }
    .card {
    width: 100px;
    height: 50px;
    border: 1px solid;
    line-height: 50px;
    }

    最后可以引用scrollView.js这样横向滑动更顺畅,比原生的css滑动更好。

    点赞 打赏 评论
  • qq_37003462 2019-05-15 17:31

    <!DOCTYPE html>





    Document
    .box { height: 150px; width: 500px; background-color: aqua; overflow: auto; } .content { width: 1020px; } .content div { float: left; background-color: lightblue; height: 100px; width: 150px; line-height: 100px; text-align: center; margin: 10px; }




    div1

    div2

    div3

    div4

    div5

    div6





    点赞 打赏 评论
  • csdn086 2019-05-15 18:00
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="../dist/css/swiper.min.css">
    
      <!-- Demo styles -->
      <style>
        html, body {
          position: relative;
          height: 100%;
        }
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
        }
        .swiper-container {
          width: 100%;
          height: 100%;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
      </style>
    </head>
    <body>
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    
      <!-- Swiper JS -->
      <script src="../dist/js/swiper.min.js"></script>
    
      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          spaceBetween: 30,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
      </script>
    </body>
    </html>
    

    效果如下图:
    图片说明

    点赞 打赏 评论

相关推荐 更多相似问题