用fullpage.js实现视觉滚动效果
1.Html页面
<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no"><title>使用fullpage实现视觉滚动效果</title><scripttype="text/javascript"src="js/fullPage.min.js"></script><linkhref="CSS/index.css"rel="stylesheet"type="text/css"/><scriptsrc="js/jquery.1.8.1.js"></script></head><body><divid="pageContain"><divclass="page page1 current"id="page1"><imgclass="imgStyle"src="img/p16.jpg"><divclass="contain pa section"><divclass="title1">第一屏</div><aid="transparent_div1"style="position:absolute;text-align:center;bottom:0px;width: 500px;left:50%;margin-left: -250px;"><imgstyle="width:28px;height:36px;z-index:5;"src="img/arrow_down.png"></a></div></div><divclass="page page2"id="page2"><imgclass="imgStyle"src="img/p2.jpg"><divclass="contain pa section"><divclass="section_title">第二屏</div></div></div><divclass="page page3"id="page3"><imgclass="imgStyle"src="img/p4.jpg"><divclass="contain pa section"><divclass="section_title">第三屏</div><!--<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
<ul id="navBar1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>--></div></div><divclass="page page4"id="page4"><imgclass="imgStyle"src="img/p5.jpg"><divclass="contain pa section"><divclass="section_title">第四屏</div></div></div><divclass="page page5"id="page5"><imgclass="imgStyle"src="img/p8.jpg"><divclass="contain pa section"><divclass="section_title">第五屏</div></div></div><divclass="page page6"id="page6"><divclass="contain pa section"><divclass="section_title">第六屏</div></div></div></div><ulid="navBar"><li></li><li></li><li></li><li></li><li></li><li></li></ul><scripttype="text/Javascript">varrunPage;
runPage=newFullPage({
id:'pageContain',
slideTime:800,
effect: {
transform: {
translate:'Y'},
opacity: [0,1]
},
mode:'wheel, touch, nav:navBar',
easing:'ease',
scrollDelay:400});
$('#transparent_div1').on('click',function(){
runPage.next();
});
window.onload=function(){
$('#transparent_div1').css({'opacity':0.5,'display':'block'}).animate({"opacity":1},2000);
}
setInterval(function(){
$('#transparent_div1').animate({'bottom':'25px'},200).animate({'bottom':'5px'},200).animate({'bottom':'15px'},200);
},600);//pageup pagedown控制滚动document.onkeydown=function(event){vare=event||window.event||arguments.callee.caller.arguments[0];if(e&&e.keyCode==38){
runPage.PRev();
}if(e&&e.keyCode==40){
runPage.next();
}
};</script></body></html>
效果图
源代码地址：http://files.cnblogs.com/files/gzx618/fullPage.zip