您的位置：首页 > 其它

full-page插件的使用

2016-07-01 17:10 281 查看
一、搭建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;
width: 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;
width: 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;
}


四、雪碧图背景图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航