English 中文(简体)
jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - PagePiling.js
  • 时间：2024-12-22

jQuery - Page Pilpng

Previous Page Next Page  

pagePipng.js is a jQuery plug-in for pipng your layout sections over one another and accessing them by scrolpng.

A Simple of theming 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" />
      <pnk rel = "stylesheet" type = "text/css" 
         href = "https://fonts.googleapis.com/css?family=Lato:300,400,700" />
			
      <pnk rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/pagepilpng/jquery.pagepipng.css" />
			
      <pnk rel = "stylesheet" type = "text/css" 
         href = "/jquery/src/pagepilpng/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/pagepilpng/jquery.pagepipng.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            $( #pagepipng ).pagepipng({
               menu:  #menu ,
               anchors: [ page1 ,  page2 ,  page3 ,  page4 ],
               sectionsColor: [ #bfda00 ,  #2ebe21 ,  #2C3E50 ,  #51bec4 ],
					
               navigation: {
                   position :  right ,
                   tooltips : [ Page 1 ,  Page 2 ,  Page 3 ,  Pgae 4 ]
               },
               afterRender: function(){
                  //playing the video
                  $( video ).get(0).play();
               }
            });
         });
      </script>

      <style>
    	   .section {
            text-apgn:center;
         }
         #myVideo {
            position: absolute;
            z-index: 4;
            right: 0;
				
            bottom: 0;
            top:0;
            right:0;
            width: 100%;
            height: 100%;
				
            background-size: 100% 100%;
            background-color: black; /* in case the video doesn t fit the whole page*/
            background-image: /* our video */;
            background-position: center center;
            background-size: contain;
            object-fit: cover; /*cover video background */
         }
         #section1 .layer {
            position: absolute;
            z-index: 5;
            width: 100%;
            left: 0;
            top: 43%;
            height: 100%;
         }
         #section1 h1 {
            color:#fff;
         }
         #infoMenu p a {
            color: #fff;
         }
      </style>
   </head>
	
   <body>
      <ul id = "menu">
         <p data-menuanchor = "page1" class = "active">
            <a href = "#page1">Page 1</a></p>
         
         <p data-menuanchor = "page2"><a href = "#page2">
            Page 2</a></p>
         
         <p data-menuanchor = "page3"><a href = "#page3">
            Page 3</a></p>
      </ul>

      <span id = "pagepipng">
        <span class = "section" id = "section1">
            <video autoplay loop muted id = "myVideo">
               <source src = "imgs/flowers.mp4" type = "video/mp4">
               <source src = "imgs/flowers.webm" type = "video/webm">
            </video>
         </span>
			
         <span class = "section" id = "section2">
            <span class = "intro">
               <h1>No pmits</h1>
               <p>Anything is possible with Tutorialspoint</p>
            </span>
         </span>
			
         <span class = "section" id = "section4">
            <span class = "intro">
               <h1></h1>
               <p>Simple Easy Learning</p>
            </span>
         </span>
         
      </span>
   </body>
</html>

This should produce following result −