Bootstrap4 jQuery水平动画

2019年7月28日 201次阅读

我有这个代码为横向页面从左到右动画.它工作正常,但突然停止工作.没有做任何改变.

页面 – 3链接刚刚停止工作,点击页面 – 4和页面 – 5链接打开页面 – 1或页面 – 2.

页面 – 导航栏的1个链接工作
页面 – 来自navbar工程的链接

来自导航栏的第3页链接无法打开任何名称

页面 – 导航栏中的链接打开页面 – 3或页面 – 2

Page 5有时候工作有时打开Page 1

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


    <!-- Bootstrap  CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style type="text/css">
        html, body {
            height: 100%;
           /* background: linear-gradient(to left, #283048, #859398);*/
            overflow: hidden;

        }  
        
        .main{
            margin-top: 5%;
            margin-bottom: 0;
            margin-right: 0;
            mar`enter code here`gin-left: 0;
            
            width: 500%;
            height: 90%;
            
            /* Mandatory for horizontal scroll */
            overflow: hidden;
            display: inline-flex;
            white-space: nowrap;
            /* Mandatory for horizontal scroll */

        }
        
        .main .card{
            display: inline-block;
            background: transparent;
            
            height: 100%;
            width: 100%;
        }
        
        .c-toggler{
            border-color: white;
        }
        
        .navbar-dark .ham-icon{
           background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)'  stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
        
    </style>

</head>

    
<body>
<div class="container container-navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
          <a class="navbar-brand" href="#">NavBar</a> <!--Brand icon here -->
          <button class="navbar-toggler c-toggler" type="button" data-toggle="collapse" data-target="#navbar-div" aria-controls="navbar-div" aria-expanded="false" aria-label="Toggle navigation">
            <span  class="navbar-toggler-icon ham-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-div" id="navbar-div">
            <ul class="navbar-nav mr-3">
              <li class="nav-item active">
                <a class="nav-link" href="#page1"  data-toggle="collapse" data-target=".navbar-collapse.show">Page--1 <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#page2" data-toggle="collapse" data-target=".navbar-collapse.show">Page--2</a>
              </li>
                <li class="nav-item active">
                <a class="nav-link" href="#page3" data-toggle="collapse" data-target=".navbar-collapse.show">Page--3</a>
              </li>
                <li class="nav-item active">
                <a class="nav-link" href="#page4" data-toggle="collapse" data-target=".navbar-collapse.show">Page--4</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#page5" data-toggle="collapse" data-target=".navbar-collapse.show">Page--5</a>
              </li>
            </ul>
          </div>
    </nav>
</div>    

<div class="container-fluid main">
  <div class="card page1" id="page1"><h2>Page1</h2></div>
  <div class="card page2" id="page2"><h2>Page2</h2></div>
  <div class="card page3" id="page3"><h2>Page3</h2></div>
  <div class="card page4" id="page4"><h2>Page4</h2></div>
  <div class="card page5" id="page5"><h2>Page5</h2></div>
</div>

<!-- Bootstrap  and jQuery Scripts-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script>
          $(document).ready(function(){
            $("body").css("overflow" , "hidden");
            $('a[href^="#page"]').on('click' , function(){
                event.preventDefault();
                
                // Horizontal Scroll
                $('html, body').animate({scrollLeft: $($(this).attr('href')).offset().left} , 1000);        
             });
          });

</script>
</body>
</html>

最佳答案 我的猜测是,因为你隐藏了溢出,技术上没有水平滚动条,所以也没有scrollLeft.至少不是一个可预测的.

我的建议是为父容器的边距设置动画.

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


  <!-- Bootstrap  CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <style type="text/css">
    html,
    body {
      height: 100%;
      /* background: linear-gradient(to left, #283048, #859398);*/
      overflow: hidden;
    }
    
    .main {
      margin-top: 5%;
      margin-bottom: 0;
      margin-right: 0;
      mar`enter code here`gin-left: 0;
      width: 500%;
      height: 90%;
      /* Mandatory for horizontal scroll */
      overflow: hidden;
      display: inline-flex;
      white-space: nowrap;
      /* Mandatory for horizontal scroll */
    }
    
    .main .card {
      display: inline-block;
      background: transparent;
      height: 100%;
      width: 100%;
    }
    
    .c-toggler {
      border-color: white;
    }
    
    .navbar-dark .ham-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)'  stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
  </style>

</head>


<body>
  <div class="container container-navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">NavBar</a>
      <!--Brand icon here -->
      <button class="navbar-toggler c-toggler" type="button" data-toggle="collapse" data-target="#navbar-div" aria-controls="navbar-div" aria-expanded="false" aria-label="Toggle navigation">
            <span  class="navbar-toggler-icon ham-icon"></span>
          </button>

      <div class="collapse navbar-collapse navbar-div" id="navbar-div">
        <ul class="navbar-nav mr-3">
          <li class="nav-item active">
            <a class="nav-link" href="#page1" data-toggle="collapse" data-target=".navbar-collapse.show">Page--1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page2" data-toggle="collapse" data-target=".navbar-collapse.show">Page--2</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page3" data-toggle="collapse" data-target=".navbar-collapse.show">Page--3</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page4" data-toggle="collapse" data-target=".navbar-collapse.show">Page--4</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page5" data-toggle="collapse" data-target=".navbar-collapse.show">Page--5</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container-fluid main">
    <div class="card page1" id="page1">
      <h2>Page1</h2>
    </div>
    <div class="card page2" id="page2">
      <h2>Page2</h2>
    </div>
    <div class="card page3" id="page3">
      <h2>Page3</h2>
    </div>
    <div class="card page4" id="page4">
      <h2>Page4</h2>
    </div>
    <div class="card page5" id="page5">
      <h2>Page5</h2>
    </div>
  </div>

  <!-- Bootstrap  and jQuery Scripts-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script>
    $(document).ready(function() {
      $("body").css("overflow", "hidden");
      $('a[href^="#page"]').on('click', function() {
        event.preventDefault();
        // Horizontal Scroll
        let currentMargin = $('.main').css('margin-left').replace('px', '');
        let targetOffset = $($(this).attr('href')).offset().left;
        $('.main').animate({
          marginLeft: currentMargin - targetOffset
        }, 1000);
      });
    });
  </script>
</body>

</html>
点赞