Question

好的，最近我问过一个关于HTML页面转换的问题（HTML How to Transition Between Pages）。所以我发现这个名为barba.js的东西，所以我得到了它......它没有用。我搜索了一段时间，几乎没有简单的跟踪或清除文档或说明。

以下是我页面的代码（所有页面代码都相同）

<DOCTYPE html>
<div id="barba-wrapper">
<div class="barba-container">
<html lang="en">

    <body background="Img1.png">
    <link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
    <link rel="stylesheet" href="css.css" type="text/css"/>
    <script src="barba.js"></script>
    <script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
    <script src="nextprev.js"></script>
    <script src="TweenMax.min.js"></script>
    <title>Page 1</title>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <center><big><font size="15">A Beach Somewhere</font></big></center>
    <center><h3><b><a href="Page2.html">Next&#10140;</a></b></h3></center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <br>
    <br>

    </body>

</html>
</div>
</div>

我想使用barba.js，因为根据网站上的说明，它听起来正是我想要的，但是如果有更好的选择会很棒，但我最好还是想解决一下我的问题

-Thanks！

更新所以我现在改变了一些代码，但它仍然没有用。 HTML：

<DOCTYPE html>
<html lang="en">

    <body background="Img1.png">
    <main id="barba-wrapper" data-prev="" data-next="Page2.html">
    <div class="barba-container">
    <link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
    <link rel="stylesheet" href="css.css" type="text/css"/>
    <title>Page 1</title>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <center><big><font size="15">A Beach Somewhere</font></big></center>
    <center><h3><b><a href="Page2.html" class="nav next">Next&#10140;</a></b></h3></center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


    </div>
    </main>

    </body>

</html>

<script src="barba.js"></script>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        Barba.Pjax.start();
      });
</script>

CSS.css：

font{
    size:25;
    color:#FFFFFF;
    }

body {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  color: #555;
}


.barba-container {
  position: relative;
}

nextprev.js：

document.addEventListener("DOMContentLoaded", function() {
  var lastElementClicked;
  var PrevLink = document.querySelector('a.prev');
  var NextLink = document.querySelector('a.next');

  Barba.Pjax.init();
  Barba.Prefetch.init();

  Barba.Dispatcher.on('linkClicked', function(el) {
    lastElementClicked = el;
  });

  var MovePage = Barba.BaseTransition.extend({
    start: function() {
      this.originalThumb = lastElementClicked;

      Promise
        .all([this.newContainerLoading, this.scrollTop()])
        .then(this.movePages.bind(this));
    },

    scrollTop: function() {
      var deferred = Barba.Utils.deferred();
      var obj = { y: window.pageYOffset };

      TweenLite.to(obj, 0.4, {
        y: 0,
        onUpdate: function() {
          if (obj.y === 0) {
            deferred.resolve();
          }

          window.scroll(0, obj.y);
        },
        onComplete: function() {
          deferred.resolve();
        }
      });

      return deferred.promise;
    },

    movePages: function() {
      var _this = this;
      var goingForward = true;
      this.updateLinks();

      if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
        goingForward = false;
      }

      TweenLite.set(this.newContainer, {
        visibility: 'visible',
        xPercent: goingForward ? 100 : -100,
        position: 'fixed',
        left: 0,
        top: 0,
        right: 0
      });

      TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
      TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
        TweenLite.set(_this.newContainer, { clearProps: 'all' });
        _this.done();
      }});
    },

    updateLinks: function() {
      PrevLink.href = this.newContainer.dataset.prev;
      NextLink.href = this.newContainer.dataset.next;
    },

    getNewPageFile: function() {
      return Barba.HistoryManager.currentStatus().url.split('/').pop();
    }
  });

  Barba.Pjax.getTransition = function() {
    return MovePage;
  };
});

Tweenmax.min.js：https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js

Bootstrap.css：getbootstrap.com

我从barba页面上的一个示例中获得了大部分代码（[barbajs.org/demo/nextprev/index.html]）

我对javascript和这样的事情非常糟糕，所以任何帮助都会非常感谢！

Answer 1

您必须将barba.js包装器和容器放在body标签中。当DOM准备就绪时，您还必须初始化Barba.js.

public static void main(String[] args) throws IOException {
    try(Scanner input = new Scanner(System.in);){
        int z, t;
        System.out.println("Enter two numbers: ");
        z = input.nextInt();
        t = input.nextInt();
        humbala(z, t);
    }
}

public static void humbala(int x, int y) {
    int counter = 0;
    for (int i = x; i <= y; i++) {
        if(counter++ % 3 == 0){
            System.out.println();
        }
        System.out.println(i);
    }
}

我没有看到任何地方被召唤。我也不知道你是否有任何.js文件中包含的页面之间的转换代码。

请参阅http://barbajs.org/transition.html

Answer 2

我遇到了完全相同的问题。将 defer 属性添加到 <script> 标记为我完成了这项工作。

喜欢<script defer src="barba.js"></script>

这将导致脚本等待 DOM 完全加载。
另外，请务必在您的 / 的路径前放置一个 href。

喜欢<a href="/Page2.html"

希望它能解决您的问题！

Barba Js不工作

2 个答案: