javascript - 页面转换后 JavaScript 文件不加载 (barba.js)
问题描述
我的 index.html 上一切正常。在第一个 .onload 页面上,所有图像都是可拖动的,并且遍布整个页面
这里的问题:
但是,当我转到 ABOUT.html 页面并返回 INDEX.html 时,我的脚本看起来不再工作了,我只能看到一个甚至无法拖动的图像。
在这里仔细看看我的项目: https ://codepen.io/cat999/project/editor/AEeEdg
** 如何解决问题?有人可以帮我修复我的代码吗?**
var winWidth = window.innerWidth,
winHeight = window.innerHeight,
threeWinHeight = winHeight*3;
$(window).on('resize', function(){
winHeight = window.innerHeight,
twiceWinHeight = winHeight*2;
});
$('.shape').each(function(){
var topPos = Math.floor(Math.random()*1300),
//BE CAREFUL 7000px is less then total body height or CAUSING OVERFLOW
leftPos = Math.floor(Math.random() * winWidth);
$(this).css('top', topPos + 'px');
$(this).css('left', leftPos + 'px');
});
Draggable.create('.shape', {
//type:"rotation",
bounds: '.section-2',
edgeResistance:0.65,
throwProps:true,
});
var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
var number3 = Math.floor((Math.random() * 0) + 15);
var number4 = Math.floor((Math.random() * 0) + 6);
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");
$(".shape--square").css("transform", "rotate(" + number3 + "deg)");
$(".shape--circle-2").css("transform", "rotate(" + number4 + "deg)");
此外,index 和 about 部分使用 barba.js。这是我的脚本列表:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="main.js"></script>
解决方案
Marlene,尝试在 barba.init 函数内的 main.js 文件中添加以下 JS 代码:
views: [{
namespace: 'home-section',
beforeEnter({ next }) {
// load your script
let script = document.createElement('script');
script.src = 'draggable.js'; // location of your draggable js file that is responsible for that image loading and dragging functionality
next.container.appendChild(script);
},
}],
推荐阅读
- html - 背景图片 url() 不使用 sass 编译
- c# - 无法隐式转换类型 C# .Net Core 问题
- azure - Micorsoft parner Center API - 是否可以列出客户的所有管理员用户?或根据用户主体名称过滤客户用户?
- python - 有一个火球类功能,当我发送垃圾邮件“f”时它仍然存在
- angularjs - 使用角度重复分页(角度 1.2)
- c# - 对数组中元素的多次引用与将该元素分配给变量
- android - java.lang.VerifyError:验证程序拒绝了类 kotlin.UByte
- vue.js - 如何修复 vue.js 中的 BrowserslistError?
- python - How to extract a substring from a string in python between a marker and the nth occurrence of another marker
- python - 到达数据框中的每个单元格