fullpage全屏/整屏滚动组件简单实例Demo

最新推荐文章于 2022-09-10 15:05:46 发布

天南韩立

最新推荐文章于 2022-09-10 15:05:46 发布

阅读量6.5k

点赞数

分类专栏： HTML JavaScript 文章标签： css 鼠标 fullpage 滚动组件全屏整屏

本文链接：https://blog.csdn.net/u014175572/article/details/50339073

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 1 订阅

订阅专栏

效果图如下，鼠标滚动可以切换div模块：

需要引用的js和css文件有（网络上的连接有时候会失效，在此给出离线的下载地址）：

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>fullpage实例</title>
		<link rel="stylesheet" href="css/jquery.fullPage.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.easings.min.js"></script>
		<script type="text/javascript" src="js/jquery.fullPage.js"></script>
		<script>
			$(document).ready(function(){
				$("#fullpage").fullpage();	//激活fullpage
			})
		</script>
	</head>

	<body>
		<div id="fullpage">
			<div class="section">第一层：练气</div>
			<div class="section">第二层：筑基</div>
			<div class="section">第三层：结丹</div>
			<div class="section">第四层：元婴</div>
			<div class="section">第五层：化神</div>
		</div>
	</body>

</html>

Demo下载地址：http://download.csdn.net/detail/u014175572/9363695

fullpage.js的cdnjs连接地址：https://cdnjs.com/libraries/fullPage.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.min.js