一、搭建full-page环境
1、依次下载jquery-3.0.0.min.js、jquery-ui-min.js和jquery.fullPage.js
//因为full-page是基于jquery开发的，所以必须要有jquery的支持；另要设置easing参数，所以也必须要有jquery-ui的支持。
二、html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <!-- 引用full-page自带的css文件 --> <link rel="stylesheet" href="css/jquery.fullPage.css"> <!-- 引用自己设置的css动画样式 --> <link rel="stylesheet" href="css/index.css"> <style> /*改进右侧的导航界面，采用雪碧图的方式*/ #fp-nav ul li a {/*未激活的样式*/ float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url("images/nav-ico.png") 5px 5px no-repeat; } /*鼠标移上去激活的样式*/ #fp-nav ul li .active { background-position: 0 bottom; } </style> <!-- 引用js文件 --> <script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <!-- 启动full-page --> <script> $(function() { $('#fullpage').fullpage({ // 'verticalCentered': false, anchors: ['page1', 'page2', 'page3', 'page4'], 'navigation': true, // 'navigationColor':'#cccccc', 'navigationPosition': 'right', 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'] }) }); </script> </head> <body> <div id="fullpage"> <!-- 第一画面 --> <div class="section"> <div class="bg"> <img src="images/page1-img.png" alt=""> </div> <div class="bg11"></div><!-- 此处图片作动画 --> <div class="bg12"></div><!-- 此处图片作动画 --> </div> <!-- 第二画面 --> <div class="section"> <div class="bg"> <img src="images/page2-img.png" alt=""> </div> </div> <!-- 第三画面 --> <div class="section"> <div class="bg"> <img src="images/page3-img.png" alt=""> </div> </div> </div> </body> </html>
三、index.css
.bg11{
position: absolute;
79px;
height: 263px;
left: 0;
top:140px;
background: url("../images/bg11.png") no-repeat;
opacity: 0;
transition:all 1s;
}
.active .bg11{
left: 400px;
opacity: 1;
transition-delay:0.7s;
}
.bg12{
position: absolute;
943px;
height: 587px;
left: 25%;
top:-15%;
transform:scale(0.5,0.5);
opacity: 0;
background: url("../images/bg12.png") no-repeat;
transition:all 1s;
}
.active .bg12{
opacity: 1;
transform:scale(1,1);
transition-delay:.7s;
}
四、雪碧图背景图片
