jQuery |多卷插件

jQuery 提供了multiscroll.js插件，可以帮助程序员创建分割的网页以及分割的多个垂直滚动面板。

注意：请将 jQuery multiscroll 插件下载到您的工作文件夹，并在代码的 head 部分包含所需的文件，如下所示。下载“jquery.easings.min.js”文件。下载“examples.css”

包含 jQuery multiscroll.js 插件文件：

示例 1：在下面的示例中，演示了multiscroll 插件，它导致页面的垂直滚动。一些基本的选项设置是在 multiscroll 插件的 jQuery函数中完成的，例如loopBottom : true ， loopTop : true用于循环效果。其他选项如scrollingSpeed : 1000用于管理速度参数。程序员可以根据应用程序的要求设置选项。

  

    
     jQuery Multiscroll Plugin
  
    
    
  
    
  
    
    
    
    
    
        $(document).ready(function() {
            $('#containerDivID').multiscroll({
                sectionsColor: ['#008000', '#32CD32', '#90EE90'],
                anchors: ['php', 'mysql', 'jquery'],
                menu: '#menu',
                navigation: true,
                navigationTooltips: ['php', 'mysql', 'jquery'],
                loopBottom: true,
                loopTop: true,
                leftSelector: 'ms-left',
                rightSelector: 'ms-right',
                scrollingSpeed: 1000
            });
        });
    

  

    
        
          PHP slide
        
          MySQL slide
        
          jQuery slide
    
  
    
        
            
                PHP Left 
            
  
            
                MySQL Left 
            
  
            
                jQuery Left 
            
  
        
  
        
            
                PHP Right 
            
  
            
                MySQL Right 
            
  
            
                jQuery Right
            
        
    

  

输出：

示例 2：在下面的示例中，使用更多选项设置(如easing : ‘easeOutBack’ )演示了multiscroll 插件。页眉和页脚部分也设计在代码的 CSS 部分以及 jQuery 代码中的填充选项设置中。

  

    
     jQuery Multiscroll Plugin
  
    
    
    
  
    
    
    
    
  
    
        $(document).ready(function() {
            $('#containerDivID').multiscroll({
                sectionsColor: ['#008000', '#32CD32', '#90EE90'],
                anchors: ['php', 'mysql', 'jquery'],
                menu: '#menu',
                css3: true,
                navigation: true,
                navigationTooltips: ['php', 'mysql', 'jquery'],
                easing: 'easeOutBack',
                paddingTop: '100px',
                paddingBottom: '100px'
            });
        });
    
  
    
        #headerDivID,
        #footerDivID {
            position: fixed;
            width: 100%;
            height: 50px;
            display: block;
            text-align: center;
            background: #808080;
            z-index: 5;
            color: #e9e9e9;
            padding: 20px 0 0 0;
        }
          
        #headerDivID {
            top: 0px;
        }
          
        #footerDivID {
            bottom: 0px;
        }
          
        #menu {
            position: fixed;
            height: 50px;
            z-index: 50;
            width: 100%;
            padding: 0;
            margin: 0;
        }
          
        #menu li {
            display: inline-block;
            margin: 10px;
            color: #0000;
            background-color: #808080;
            background: rgba(255, 255, 255, 0.5);
            -webkit-border-radius: 12px;
        }
          
        #menu li a {
            text-decoration: none;
            color: #000;
        }
          
        #menu li.active {
            background-color: #696969;
            background: rgba(255, 255, 255, 1.5);
            color: #0000;
        }
          
        #menu li:hover {
            background: rgba(255, 255, 255, 0.5);
        }
          
        #menu li.active a {
            color: #0000;
        }
          
        #menu li.active a:hover {
            color: #0000;
        }
          
        #menu li a,
        #menu li.active a {
            padding: 10px 15px;
            display: block;
        }
    

  

    GeeksforGeeks
    footer@GeeksforGeeks
    
        
          PHP slide
        
          MySQL slide
        
          jQuery slide
    
  
    
        
            
                Left1 
            
  
            
                 Left2 
            
  
            
                 Left3 
            
        
  
        
            
                Right1 
            
  
            
                MySQL Right2 
            
  
            
                jQuery Right3
            
        
    

  

输出：