📜  jQuery |页面打桩插件

📅  最后修改于: 2021-11-24 05:43:13             🧑  作者: Mango

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

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

jQuery pagePiling.js 插件的链接:

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

HTML


 

    
    jQuery pagePiling plugin 
    
    
    
    
 
    
 
    
    
 
    
 

 

 
    
 
    
        
            

GeeksForGeeks

        
        
            
                

GFG Backgrounds

                 

All pages with layouts!

              
        
        
            
                

Learn Jquery

                 

Its fun learning plugins.

              
        
    
 


HTML


 

    
    jQuery pagePiling plugin for Looping
    
 
    
    
 
    
    
 
    

 

    
 
    
        
            

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.

              
        
    
 


HTML


 

    
 
    
        jQuery pagePiling plugin for
        Horizontal scroll
    
 
    
 
    
 
    
 
    
 
    
 
    
 

 

    
 
    
        
                         
              

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

              
        
    
 


输出:

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

HTML



 

    
    jQuery pagePiling plugin for Looping
    
 
    
    
 
    
    
 
    

 

    
 
    
        
            

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
    
 
    
 
    
 
    
 
    
 
    
 
    
 

 

    
 
    
        
                         
              

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

              
        
    
 

输出: