jQuery-plugin-pagePiling

用法整理

• 下载地址：https://github.com/alvarotrigo/pagePiling.js#pagepilingjs

• 参考文档：https://github.com/alvarotrigo/pagePiling.js#pagepilingjs

• 能实现页面过渡跳转（类似百度百科的样子）
  

• 用法：

            	<ul id="menu">
                        <li data-menuanchor="firstPage" class="active"><a href="#section1">First section</a></li>
                        <li data-menuanchor="secondPage"><a href="#section2">Second section</a></li>
                        <li data-menuanchor="thirdPage"><a href="#section3">Third section</a></li>
                        <li data-menuanchor="fourthPage"><a href="#section4">Fourth section</a></li>
                    </ul>
                    <div id="pagepiling">
                            <div class="section" id="section1">i am a good boy !</div>
                            <div class="section" id="section2">talk is cheap!</div>
                            <div class="section" id="section3">show me the code !</div>
                            <div class="section" id="section4">fighting!you can do it</div>
                      </div>
  
            
    var deleteLog = false;
  
    $(document).ready(function() {
    	$('#pagepiling').pagepiling({
    		menu: '#menu',
    		anchors: ['section1', 'section2', 'section3','section4'],
    		navigation: {
                'textColor': '#f2f2f2',
                'bulletsColor': '#ccc',
                'position': 'right',
                'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4'],
            }
    	});
    });
  

• 注意menu的选择器记得要匹配好

• a链接的跳转id地址要匹配好

• 更多用法看文档