Barba Js不工作
好的，最近我问了一个关于HTML页面之间转换的问题(HTML如何在页面之间转换)。所以我找到了这个叫做barba.js的东西，所以我发现and...it不起作用。我搜索了一段时间，几乎没有什么容易遵循的，也没有清晰的文档或说明。
这是我的页面的代码(所有页面代码都是相同的)
<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➜</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➜</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和诸如此类的东西真的很糟糕，所以任何帮助都是非常感谢的！
回答 2
Stack Overflow用户
发布于 2017-02-21 22:46:18
您必须将barba.js包装器和容器放置在主体标记中。当DOM准备就绪时，还必须初始化Barba.js。
Barba.Pjax.start();我哪也没看到那个电话。我也不知道您是否有在任何.js文件中包含的页面之间转换的代码。
请参阅http://barbajs.org/transition.html
Stack Overflow用户
发布于 2021-01-01 16:28:46
我也有过同样的问题。将defer属性添加到<script>标记为我做了这项工作。
就像<script defer src="barba.js"></script>
这将导致脚本等待DOM完全加载。
另外，一定要将/放在href路径的前面。
就像<a href="/Page2.html"
希望它能解决你的问题！
https://stackoverflow.com/questions/42179002
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号