jQuery全屏滚动插件fullPage.js的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fullPage.js 示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js"></script>
</head>
<body>
<div id="fullpage">
<div class="section">第一页</div>
<div class="section">第二页</div>
<div class="section">第三页</div>
<div class="section">第四页</div>
</div>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
// 设置选项，例如导航、自动滚动、回调等
navigation: true,
scrollBar: true
});
});
</script>
</body>
</html>这个代码示例展示了如何使用fullPage.js创建一个简单的全屏滚动网站。我们首先引入了必要的CSS和JavaScript文件，然后定义了一个带有四个部分的HTML容器。在jQuery的ready方法中，我们初始化了fullPage插件，并通过一个选项对象设置了导航栏和滚动条的显示。
评论已关闭