全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器，包括IE8+，支持移动设备。
1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件
1 2 3 | <link rel="stylesheet" href="css/jquery.pagepiling.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.pagepiling.min.js"></script> |
2、HTML代码如下给几个section类的div
1 2 3 4 5 6 | <div id="pagepiling"> <div class="section"><h3>第一屏</h3></div> <div class="section"><h3>第二屏</h3></div> <div class="section"><h3>第三屏</h3></div> <div class="section"><h3>第四屏</h3></div> </div> |
3、$(‘#pagepiling’)调用pagepiling()方法
1 2 3 | $(function(){ $('#pagepiling').pagepiling(); }); |
//pagePiling所有参数的应用实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $(document).ready(function() { $('#pagepiling').pagepiling({ menu: null, direction: 'vertical', verticalCentered: true, sectionsColor: [], anchors: [], scrollingSpeed: 700, easing: 'swing', loopBottom: false, loopTop: false, css3: true, navigation: { 'textColor': '#000', 'bulletsColor': '#000', 'position': 'right', 'tooltips': ['section1', 'section2', 'section3', 'section4'] }, normalScrollElements: null, normalScrollElementTouchThreshold: 5, touchSensitivity: 5, keyboardScrolling: true, sectionSelector: '.section', animateAnchor: false, //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, }); }); |
2019年5月5日 下午9:32
好文章！666，学习了