gpt4 book ai didi

javascript - 在 Codepen 元素中使用 fullpage.js 时遇到问题

转载 作者:行者123 更新时间:2023-11-30 14:38:41 24 4
gpt4 key购买 nike

我是编码新手,我已经掌握了基本的 CSS 和 HTML 技能,但我无法将 fullpage.js 集成到我的 codepen 元素 (https://codepen.io/Selky/project/editor/DYrVYr) - 甚至上传作者使用的确切演示文件(Alvaro Trigo)我还有问题。这些是演示调用的脚本:

<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
</script>

如果您能深入了解为什么这对我不起作用,我将不胜感激。我查看了其他 codepen 文件(例如 https://codepen.io/alvarotrigo/pen/NxyPPp ),他们似乎甚至不需要

$('#fullpage').fullpage({
sectionsColor: ['黄色', '橙色', '#C0C0C0', '#ADD8E6'],
});

正常运行 - 但我不明白为什么或者我是否能够在元素环境中执行相同的操作。

编辑:我正在添加演示代码的整个当前头部部分,但我无法使其发挥作用:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fullPage.js One Page Scroll Sites</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
<meta name="Resource-type" content="Document" />


<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />


<style>
/* Sections
* --------------------------------------- */
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img{
margin: 20px 0 0 52px;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery.fullPage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
</script>

</head>

和我的文件夹结构:imgur.com/a/f7KhI3M

经过一些小改动后,这是当前的 head 代码(仍然没有功能):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fullPage.js One Page Scroll Sites</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
<meta name="Resource-type" content="Document" />


<link rel="stylesheet" type="text/css" href="jquery.fullpage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />


<style>
/* Sections
* --------------------------------------- */
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img{
margin: 20px 0 0 52px;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery.fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
</script>

</head>

感谢大家的帮助,我得到了正确的 header 内容(我修复了一些文件路径并切换到使用 HTTPS 库而不是 HTTP):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fullPage.js One Page Scroll Sites</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" />
<meta name="Resource-type" content="Document" />


<link rel="stylesheet" type="text/css" href="jquery.fullpage.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />


<style>
/* Sections
* --------------------------------------- */
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img{
margin: 20px 0 0 52px;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery.fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000
});
});
</script>

</head>

最佳答案

问题是您在 HTML 中使用了 fullPage.js,但是您的文件名为 jquery.fullpage.js。请记住,路径区分大小写。

fullpage/jquery.fullpage.extensions.min.js

也是不正确的,因为您没有整页文件夹

jquery.fullpage.extensions.min.js

应该是正确的,

关于javascript - 在 Codepen 元素中使用 fullpage.js 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50026059/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com