个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 FullPage.js 将 WebGL 脚本添加到网站，但效果不佳(我只看到黑屏)。我不知道问题出在哪里，因为 WebGL 脚本和 Fullpage.js 都可以完美地分开工作。我无法将所有脚本添加到 jsFiddle，但可以在此站点看到脚本 http://www.scandinavija.com/index.html (我删除了所有不相关的脚本)。
当我在 Chrome 中检查网站时，出现以下错误:“未捕获的类型错误:无法读取 particles.js:6 处的 null 属性‘offsetWidth’”这可能是问题所在吗？ p>
然而，我的直觉告诉我问题应该出在这里:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/examples.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<!-- Particles (three.js) -->
<script type="text/javascript" src="js/detector.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: true,
anchors: ['firstSection', 'secondSection', '3rdSection',
'4thSection', '5thSection'],
});
});
</script>
</head>
<body>
<!-- My canvas (three.js) below -->
<div id="canvas-container"></div>
<div id="fullpage">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
<div class="section" id="section5"></div>
</div>
</body>
</html>
CSS:
@CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
background-color: #000;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* START OF MY SCRIPT BELOW*/
#canvas-container {
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
}
最佳答案
您收到此错误是因为您尝试访问评估为 null 的对象的属性。
粒子.js
var container = document.getElementById('canvas-container');
// ^^^^^^^^^^^^^^^^
// not found
var w = container.offsetWidth;
// ^^^^^^^^^
// eq. null
这是因为在执行脚本 particles.js 时，您的元素 #canvas-container 不存在于 DOM 中。
您只需将您的代码包装在文档加载的回调中，以确保该元素可访问:
$(function() {
// particles.js code
});
您也可以简单地将脚本标记移动到 HTML 文件的末尾:
...
<script type="text/javascript" src="js/particles.js"></script>
</body>
关于javascript - 将 Canvas 添加到 fullpage.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41921293/
24
4
0
根据 fullpages.js 文档，应该可以使用参数 verticallyCentered 将 .section 的内容垂直居中(默认为 true)。 但是，我无法使用以下 HTML 结构使用此功能
我有一个 Fullpage.js 包装器和一个特殊的覆盖或页脚包装器。我现在的问题是，我无法在 IOS 上滚动页脚 div 内的内容。它适用于 Android 和所有主流浏览器，但不适用于 IOS。
这是 HTML，但网页的 Div 可以正常工作!我需要在第二个 div 上添加更多内容，并在这样做时启用滚动。 about
我正在使用 fullPage.js 创建全屏 slider 。 slider 应该自动循环浏览各个部分，我使用以下代码: var idInterval; $(document).ready(f
有谁知道如何编辑下面的代码，使水平幻灯片之间的过渡更像模糊而不是淡入淡出？当你在水平幻灯片之间滚动时，我试图让它感觉你正在离开一个“房间”并进入另一个“房间”，所以模糊效果或任何类似的效果比淡入效果更
我在我的网站上使用整页 js，并且在其中一个部分中包含了一个 iframe。 example issue 如果您移至上例中的最后一部分，则无法向下滚动，除非您滚动到 iframe 之外。我发现 ful
js，我想在鼠标悬停在 h1 标签上时暂停 slider ，但它没有，我知道这是 javascript 的问题，但我无法让它工作 http://jsfiddle.net/2dhkR/405/ $(do
我现在正尝试将整页插件放入我的网站( https://github.com/alvarotrigo/fullPage.js ) 除了刷新问题外，一切正常。 (这可能不是每个人的问题) 问题是: 滚动到
我有一个使用 fullpage.js 的元素。而且我完全不知道如何将一张大图片放在两个屏幕上，这样它就不会保持固定。 最佳答案 将大图剪成两半，保存为两张图。 将上半部分设置为第一节的backgrou
我在我的元素中使用 fullpage.js 插件。它在所有其他浏览器中工作正常，即它显示水平滚动条。 最佳答案 看起来问题出在第 1 部分的 container 类元素中。 看起来你的 home-ba
我正在尝试获得固定背景以使用 Fullpage JS。无论我做什么，背景都留在那里，或者根本不出现。我尝试了一个 JS Fiddle，但我也根本无法让它工作。 https://jsfiddle.net
我正在使用带 Bootstrap 的 symfony 2.3 和 FullPage.js . 当我加载我的页面时，它似乎被加载了两次... 所以我的部分中的宽度幻灯片是错误的，创建的代码也是错误的。
我有两个按钮:#btn1 和 #btn2；我希望它们在单击时来回移动。因此，#btn1 必须转到上一张幻灯片，当我单击 #btn2 时，它会转到下一张幻灯片。 我使用fullPage.js用于幻灯片。
同一张幻灯片可以设置两个部分吗？就像如果我在(第 1 节幻灯片 1)上，然后我移动(到第 1 节幻灯片 2)，第 2 节将设置幻灯片 2。 我想知道这在 fullpage.js 中是否可行 我想创建类
我正在使用 fullpage.js 设计网站。我想为水平导航栏中的每个点赋予标题。 function addSlidesNavigation(section, numSlides){
问题 我尝试添加一个导航工具提示的链接，基于 html，它应该可以工作。但是，无论我单击哪个工具提示，我都会被带到第二部分 - 即使指示的地址是正确的并且应该带我浏览所有部分。 for (var i
我正在使用 fullPage.js 制作一个网站，出于设计目的，我希望导航仅在滚动时显示。我已经尝试过了 $(document).ready(function() { $('#
我正在使用 fullpage.js，但在使用调整背景视频大小的 onloadedmeta 函数时遇到问题。 直接访问包含视频部分 ID 的页面 URL 时效果非常好。也就是说，它会调整大小以占据整个屏
我试图将 flexbox 的内容垂直和水平居中，但它似乎不起作用: 这是 CSS: #about{ display: flex; justify-content: center; align-item
您好，我正在使用 fullpage.js 制作移动网络，我正在尝试创建指向特定部分/幻灯片的外部链接，但它不起作用，在查看它不起作用的原因后，我发现当您进行事件时幻灯片或节，节的所有外部链接都会将您定
我是一名优秀的程序员,十分优秀！