jQuery |页面打桩插件

jQuery pagePiling.js插件是一项丰富的功能，可供程序员堆叠多个布局部分，一个重叠，并通过 URL 或鼠标滚动或侧项目符号导航访问每个页面。此功能提供所有类型的平滑垂直、水平和侧面导航到目标锚链接。它还管理回调函数、视频背景和滚动速度。我们将在以下示例中仅介绍其中的一小部分。

注意：请从 pagePiling.js插件下载以下库文件并将其保存在您的工作文件夹中以包含在您的代码中。请从此链接下载“example.css”文件。

jQuery pagePiling.js 插件的链接：

 
 

示例 1：以下示例演示了使用 jQuery 代码编写的 pagePiling 插件的基本工作。它支持带有背景图像的不同网页布局页面的交互式滚动。这些页面也可以通过右侧的侧项目符号进行导航。

HTML

 

    
    jQuery pagePiling plugin 
    
    
    
    
 
    
  
 
    
    
    
        var deleteLog = false;
 
        $(document).ready(function() {
            $('#pagepiling').pagepiling({
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3'],
                navigation: {
                    'textColor': '#f0f2f0',
                    'bulletsColor': '#ccc000',
                    'position': 'right',
                    'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
                }
            });
        });
    
 
    
        h1 {
            font-size: 5em;
            font-family: arial, helvetica;
            color: #fff;
            margin: 0;
            padding: 0;
        }
         
        .section {
            text-align: center;
        }
         
        #section1,
        #section2,
        #section3 {
            background-size: cover;
        }
         
        #section1 {
            background-image: url(images/background1.jpg);
        }
         
        #section2 {
            background-image: url(images/background2.jpg);
            padding: 6% 0 0 0;
        }
         
        #section3 {
            background-image: url(images/background3.jpg);
            padding: 6% 0 0 0;
        }
         
        #section3 h1 {
            color: #000;
        }
         
        #section1 h1 {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 30px;
            color: #fff;
        }
         
        #section2 .intro {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 30px;
        }
         
        #section2 h1,
        #section2 p {
            text-shadow: 1px 5px 20px #000;
        }
         
        #section3 h1,
        #section3 p {
            text-shadow: 1px 5px 20px #000;
            color: #fff;
        }
    
 

 

 
    
        
          Home
        
          About
        
          jQuery
    
 
    
        
            GeeksForGeeks
        
        
            
                GFG Backgrounds 
                 
All pages with layouts!
 
            
        
        
            
                Learn Jquery 
                 
Its fun learning plugins.
 
            
        
    

 

输出：

示例 2：在以下示例中，启用了顶部和底部循环功能。为此，如 jQuery 代码所示，loopTop和loopBottom属性设置为“true”。

HTML

 

    
    jQuery pagePiling plugin for Looping
    
 
    
    
 
    
    
    
    
 
    
        var deleteLog = false;
 
        $(document).ready(function() {
            $('#pagepilingDivID').pagepiling({
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3'],
                sectionsColor: [
                  'green', 'lime', 'forestgreen', 'darkgreen'],
                loopTop: true,
                loopBottom: true
            });
        });
    

 

    
        
            Home
        
          About
        
          Contact
    
 
    
        
            GeeksForGeeks
             
Looping through top and bottom is working.
 
        
        
            
                Page Piling in a Looping style
                 
To see the looping page piling feature,
                  just use the PgUp and PgDn scroll keys .
 
            
        
        
            
                Back to the first page after scrolling down.
                 
And it shows a looping feature, scrolling
                  down till the end gets back the first section.
 
            
        
    

 

输出：

示例 3：在下面的示例中，通过设置选项direction: ‘horizontal’为页面启用水平滚动，如 jQuery 代码所示。

HTML

 

    
 
    
        jQuery pagePiling plugin for
        Horizontal scroll
    
 
    
 
    
 
    
    
 
    
    
 
    
        $(document).ready(function () {
 
            $('#pagepilingDivID').pagepiling({
                direction: 'horizontal',
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3', 'page4'],
                sectionsColor: [
                    'green', 'forestgreen', 'lime', 'white'],
                navigation: {
                    'position': 'right',
                    'tooltips': [
                        'Page 1', 'Page 2', 'Page 3', 'Page 4']
                },
 
            });
        });
    
 
    
        #section1 img {
            margin: 20px 0;
            opacity: 0.7;
        }
 
        #colors2,
        #colors3 {
            position: absolute;
            height: 150px;
            width: 370px;
            z-index: 1;
            background-repeat: no-repeat;
            left: 0;
            margin: 0 auto;
            right: 0;
        }
 
        #colors2 {
            background-image: url(images/colors2.png);
            top: 0;
        }
 
        #colors3 {
            background-image: url(images/colors3.png);
            bottom: 0;
        }
    
 

 

    
        
            Home
        
        
            About
        
        
            Tutorials
        
    
 
    
        
            
            
 
            GFG Horizontal Scroll
             

                pagePiling also provides
                horizontal scrolling
            
 
 
        
        
            
                Highly flexible and configurable
 
                 

                    Do the horizontal way of
                    scrolling and check!
                
 
            
        
        
            
                Very interactive for users
                 
Great idea to include in websites
 
            
        
    

 

输出：