jQuery - Multiscroll.js-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Multiscroll.js

multiscroll.js is a jQuery plugin for creating sppt pages with two vertical scrolpng panels.

A Simple of multiscroll example as shown below −

<!DOCTYPE html>
<html xmlns = "https://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />	
      <title>multiscroll.js - sppt multi-scrolpng pages plugin</title>
		
      <pnk rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/multiscroller/jquery.multiscroll.css" />		
      <pnk rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/multiscroller/examples.css" />	
			
      <script 
         src = "https://ajax.googleapis.com/ajax/pbs/jquery/1.8.3/jquery.min.js">
      </script>
      <script type = "text/javascript" 
         src = "/jquery/src/multiscroller/jquery.easings.min.js">
      </script>
      <script type = "text/javascript" 
         src = "/jquery/src/multiscroller/jquery.multiscroll.js">
      </script>

      <script type = "text/javascript">
         $(document).ready(function() {
            $( #myContainer ).multiscroll({
               sectionsColor: [ #1bbc9b ,  #4BBFC3 ,  #7BAABE ],
               anchors: [ first ,  second ,  third ],
               menu:  #menu ,
               navigation: true,
               navigationTooltips: [ One ,  Two ,  Three ],
               loopBottom: true,
               loopTop: true
            });
         });
      </script>
   </head>
	
   <body>
      <ul id = "menu">
         <p data-menuanchor = "first"><a href = "#first">First spde</a></p>
         <p data-menuanchor = "second"><a href = "#second">Second spde</a></p>
         <p data-menuanchor = "third"><a href = "#third">Third spde</a></p>
      </ul>

      <span id = "myContainer">
         <span class = "ms-left">
			
            <span class = "ms-section" id = "left1">
              <h1>Left 1</h1>
            </span>

            <span class = "ms-section" id = "left2">
               <h1>Left 2 </h1>
            </span>

            <span class = "ms-section" id = "left3">
               <h1>Left 3</h1>
            </span>
				
         </span>
	
         <span class = "ms-right">
			
            <span class = "ms-section" id = "right1">
               <h1>Right 1</h1>
            </span>

            <span class = "ms-section" id = "right2">
               <h1>Right 2</h1>
            </span>

            <span class = "ms-section" id = "right3">
               <h1>Right 3</h1>
            </span>
				
         </span>
      </span>
   </body>
</html>

This should produce following result −

jQuery - Multiscroll.js

友情链接