您的位置：首页 > Web前端 > JavaScript

全屏滚动实现：fullPage.js和fullPage

2015-03-18 09:43 567 查看
fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。

一、fullPage.js实现全屏

fullPage.js是开源的JQuery插件库，其Github地址：https://github.com/alvarotrigo/fullPage.js

1、基本演示

1.1引入文件

<!--引入css-->
<linkrel="stylesheet"type="text/css"href="./fullPage.js-master/jquery.fullPage.css"/>
<!--fullpage.js依赖于jquery库-->
<scripttype="text/javascript"src="./jquery.js"></script>
<scripttype="text/javascript"src="./fullPage.js-master/jquery.fullPage.min.js"></script>


1.2css：引入的css并不是给元素设置样式的，元素的样式需要自己写

<styletype="text/css">
body
{
color:#FFFFFF;
}
.section1
{
background-color:#BFDA00;
}
.section2
{
background-color:#2EBE21;
}
.section3
{
background-color:#2C3E50;
}
.section4
{
background-color:#FF9900;
}
</style>


1.3html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第三屏显示

<divid="ido">
<divclass="sectionsection1">
<h1>每一个section是一屏，这是第一屏</h3>
</div>
<divclass="sectionsection2">
<h1>每一个section是一屏，这是第二屏</h3>
</div>
<divclass="sectionsection3active">
<h1>每一个section是一屏，这是第三屏</h3>
</div>
<divclass="sectionsection4">
<h1>每一个section是一屏，这是第四屏</h3>
</div>
</div>


1.4js:

<scripttype="text/javascript">
$(function(){
$("#ido").fullpage();
});
</script>


效果：http://denon-7c931.coding.io/fullpagejs.html

1.5可以在某屏中再添加子滚动屏，借助slide类。修改上述第二个section如下：

<divclass="sectionsection2"style="text-align:center">
<h1class="slide">第二屏的第一屏</h1>
<h1class="slide">第二屏的第二屏</h1>
<h1class="slide">第二屏的第三屏</h1>
<h1class="slide">第二屏的第四屏</h1>
</div>


效果：http://denon-7c931.coding.io/fullpagejs.html

1.6添加背景屏，在html添加两个section

<divclass="sectionsection5">
<h1>每一个section是一屏，这是第5屏--图片背景</h3>
</div>
<divclass="sectionsection6">
<h1>每一个section是一屏，这是第6屏--图片背景</h3>
</div>




添加css

.section5{background:url(http://idowebok.u.qiniudn.com/77/1.jpg)50%;}
.section6{background:url(http://idowebok.u.qiniudn.com/77/2.jpg)50%;}

效果：http://denon-7c931.coding.io/bjfull.html
（滚动到5和6屏）



1.7循环演示：continuousVertical设置为true

$(function(){
$("#ido").fullpage(
{
continuousVertical:true
});
});


效果：http://denon-7c931.coding.io/xhfull.html（滚动到第6屏，再向下滚动时自动回到第一屏）

1.8绑定菜单：添加菜单项

<ulid="menu">
<lidata-menuanchor="page1"class="active"><ahref="#page1">第一屏</a></li>
<lidata-menuanchor="page2"><ahref="#page2">第二屏</a></li>
<lidata-menuanchor="page3"><ahref="#page3">第三屏</a></li>
<lidata-menuanchor="page4"><ahref="#page4">第四屏</a></li>
<lidata-menuanchor="page5"><ahref="#page5">第5屏</a></li>
<lidata-menuanchor="page6"><ahref="#page6">第6屏</a></li>
</ul>


添加css

#menu{margin:0;padding:0;position:fixed;left:10px;top:10px;list-style-type:none;z-index:70;}
#menuli{float:left;margin:010px00;font-size:14px;}
#menua{float:left;padding:10px20px;background-color:#fff;color:#333;text-decoration:none;}
#menu.activea{color:#fff;background-color:#333;}


修改js

$(function(){
$("#ido").fullpage(
{
continuousVertical:true,//循环演示
//绑定菜单
anchors:['page1','page2','page3','page4','page5','page6'],
menu:'#menu',

});
});


效果：http://denon-7c931.coding.io/memufull.html

1.9导航演示：设置’navigation':true,

$(function(){
$("#ido").fullpage(
{
continuousVertical:true,//循环演示
//绑定菜单
anchors:['page1','page2','page3','page4','page5','page6'],
menu:'#menu',

//导航
'navigation':true,
});
});

效果：http://denon-7c931.coding.io/navfull.html（导航在右侧）




2、配置如图





如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）

<!--jquery.easings.min.js用于easing参数，也可以使用完整的jQueryUI代替，如果不需要设置easing参数，可去掉改文件-->
<scripttype="text/javascript"src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
<!--如果scrollOverflow设置为true，则需要引入jquery.slimscroll.min.js，一般情况下不需要-->
<scripttype="text/javascript"src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>




二、fullPage实现全屏

fullPage是一款不依赖任何js库的全屏滚动组件，支持垂直/水平滚动、CSS3旋转/缩放动画，支持IE5.5+，支持移动设备。其Github地址：https://github.com/powy1993/fullpage

1、基本演示

<!--引入js-->
<scripttype="text/javascript"src="./fullpage-master/js/fullPage.min.js"></script>


1.1垂直滚动

css

body{
width:100%;
*cursor:default;
overflow:hidden;
font:16px/1.5"MicrosoftYaHei";
}
div,p{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#pageContain{
overflow:hidden;
}
.page{
display:none;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
.contain{
width:100%;
height:100%;
display:none;
position:relative;
z-index:0;
}
.current.contain,.slide.contain{
display:block;
}
.current{
display:block;
z-index:1;
}
.slide{
display:block;
z-index:2;
}
.page1{
background:#37c1e3;
}
.page2{
background:#009922;
}
.page3{
background:#992211;
}
.page4{
background:#ff00ff;
}
.page5{
background:#00ff00;
}
.page6{
background:#22ffff;
}
#navBar{
z-index:3;
position:absolute;
top:10%;
right:3%;
}
#navBar.active{
background:#ccc;
}
#navBarli{
cursor:pointer;
margin-bottom:10px;
transition:all.7sease;
border-radius:50%;
line-height:40px;
text-align:center;
width:40px;
height:40px;
}
h1
{
text-align:center;
margin-top:20%;
}


html

<divid="pageContain">
<divclass="pagepage1current">
<divclass="contain">
<h1class="txt">第一屏</h1>
</div>
</div>

<divclass="pagepage2">
<divclass="contain">
<h1class="txt">第二屏</h1>
</div>
</div>

<divclass="pagepage3">
<divclass="contain">
<h1class="txt">第三屏</h1>
</div>
</div>

<divclass="pagepage4">
<divclass="contain">
<h1class="txt">第四屏</h1>
</div>
</div>

<divclass="pagepage5">
<divclass="contain">
<h1class="txt">第五屏</h1>
</div>
</div>
</div><ulid="navBar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>


js

varrunPage;
runPage=newFullPage({
id:'pageContain',
slideTime:800,
effect:{
transform:{
translate:'Y'//垂直滚动，改为X则是水平滚动
},
opacity:[0,1]
},
mode:'wheel,touch,nav:navBar',
easing:'ease'
});




效果：http://denon-7c931.coding.io/fullpage.html



1.2css3动画：修改js就行

varrunPage;
runPage=newFullPage({
id:'pageContain',
slideTime:800,
effect:{
transform:{
translate:'X',
scale:[0,1],
rotate:[270,0]
},
opacity:[0,1]
},
mode:'wheel,touch,nav:navBar',
easing:'ease'
});


效果：http://denon-7c931.coding.io/fulldh.html



1.3自动滚动，js修改如下

varrunPage,interval,autoPlay;

autoPlay=function(to){
clearTimeout(interval);
interval=setTimeout(function(){
runPage.go(to);
},1000);
}
runPage=newFullPage({
id:'pageContain',
slideTime:800,
effect:{
transform:{
translate:'X',
scale:[0,1],
rotate:[270,0]
},
opacity:[0,1]
},
mode:'wheel,touch,nav:navBar',
easing:'ease',
callback:function(index,thisPage){
index=index+1>3?0:index+1;
autoPlay(index);
}
});
interval=setTimeout(function(){
runPage.go(runPage.thisPage()+1);
},1000);


效果：http://denon-7c931.coding.io/fullauto.html






2、配置如图




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航