全屏滚动插件FullPage的使用
2015-05-16 16:30
495 查看
更多博客:http://blog.ilibing.com/
fullPage.js是开源的JQuery插件库,GitHub
地址:https://github.com/alvarotrigo/fullPage.js
3、Css
fullPage.js是开源的JQuery插件库,GitHub
地址:https://github.com/alvarotrigo/fullPage.js
1、引入文件
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
2、HTML
<body> <div id="fullpage"> <div class="section active"> <h1>每一个section是一屏,这是第一屏</h1> <p>^</p> </div> <div class="section"> <h1 class="a">每一个section是一屏,这是第二屏</h1> <p>^</p> </div> <div class="section"> <h1 class="a">每一个section是一屏,这是第三屏</h1> <p>^</p> </div> <div class="section"> <h1>每一个section是一屏,这是第四屏</h1> </div> </div> </body>
3、Css
<style type="text/css"> body { color: #FFFFFF; text-align: center; } p { font-size: 20px; position: absolute; bottom: 0px; width: 100%; text-align: center; animation: top 3s infinite; -webkit-animation: top 1s infinite; /*Safari and Chrome*/ } h1 { display: none; } .in { display: block; animation: in 3s; -webkit-animation: in 3s; /*Safari and Chrome*/ } @keyframes top { 0% { bottom: 0 } 25% { bottom: 300px } 50% { bottom: 0 } 75% { bottom: 300px } 100% { bottom: 0px } } @-webkit-keyframes top { 0% { bottom: 0 } 90% { bottom: 20px } 100% { bottom: 0px } } /*进入页面文字移动的动画*/ @keyframes in { from { margin-left: -200px; } to { margin-left: 0px; } } @-webkit-keyframes in /*Safari and Chrome*/ { from { margin-left: -200px; } to { margin-left: 0px; } } </style>
4、JavaScript
<script type="text/javascript"> $(function () { $("#fullpage").fullpage({ //设置各个页面的颜色 sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //设置循环滚动 continuousVertical: true, //设置是否显示项目导航 navigation: true, //页面初始化完成后的回调函数 afterRender: function () { $('h1').addClass('in'); }, //滚动到某一屏后的回调函数 afterLoad: function () { if (!$('h1').hasClass('in')) { $('h1').addClass('in') } }, //离开某一屏时的回调函数 onLeave: function () { $('h1').removeClass('in') } }); }); </script>
相关文章推荐
- fullpage(jQuery全屏滚动插件)插件的使用
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
- jquery.fullPage.js全屏滚动插件的使用方法
- fullpage.js全屏滚动插件使用小结
- 全屏滚动插件fullPage.js使用实例解析
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
- fullpage.js全屏滚动插件使用实例
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
- 全屏滚动插件fullPage.js使用实例解析
- fullpage.js全屏滚动插件使用实例
- 利用fullpage全屏滚动插件的使用
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- 使用fullpage.js实现全屏滚动经验以及踩的坑
- 全屏轮播插件fullpage.js的使用
- FullPage.js全屏滚动插件的配置项、方法和回调函数
- jQuery全屏滚动插件fullPage.js API
- 仿小米网jQuery全屏滚动插件fullPage.js
- 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
- jQuery全屏滚动插件fullPage.js