fullpage.js怎么设置背景图
展开全部
目的: 设置背景图
工具: fullpage.js
引用:
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
参考代码:
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 背景演示_dowebok</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
/*设置不同的背景图片*/
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #00ff00;}
.section1 { background: url(images/bg1.jpg) 50%;}
.section2 { background: url(images/bg2.jpg) 50%;}
.section3 { background: url(images/bg3.jpg) 50%;}
.section4 { background: url(images/bg4.jpg) 50%;}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<script>
//执行滚动事件,加载不同的背景图片
$(function(){
$('#dowebok').fullpage();
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section section1">欢迎来到我的空间</div>
<div class="section section2">在这里我将展示不同以往的一面</div>
<div class="section section3">展示我的知识</div>
<div class="section section4">也展示我的青春</div>
</div>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询