jQuery页面堆积插件

jQuery页面堆积插件

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

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

jQuery pagePiling.js插件的链接:

<link href=”jquery.pagepiling.css” rel=”stylesheet” type=”text/css”/>
<link href=”examples.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”jquery.pagepiling.min.js”></script>

例子1:下面的例子演示了jQuery代码中写的pagePiling插件的基本工作。它支持带背景图片的不同网页布局页面的互动滚动。这些页面也可以通过右侧的侧边子弹进行导航。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <title>jQuery pagePiling plugin </title>
    <meta name="Resource-type"
          content="Document" />
    <link rel="stylesheet" type="text/css"
          href=
"http://fonts.googleapis.com/css?family=Lato:300, 400, 700" />
    <link rel="stylesheet"
          type="text/css"
          href="jquery.pagepiling.css" />
    <link rel="stylesheet"
          type="text/css"
          href="examples.css" />
 
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
 
    <script type="text/javascript"
            src="jquery.pagepiling.min.js">
    </script>
    <script type="text/javascript">
        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']
                }
            });
        });
    </script>
 
    <style>
        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;
        }
    </style>
 
</head>
 
<body>
 
    <ul id="menu">
        <li data-menuanchor="page1"
            class="active">
          <a href="#page1">Home</a></li>
        <li data-menuanchor="page2">
          <a href="#page2">About</a></li>
        <li data-menuanchor="page3">
          <a href="#page3">jQuery</a></li>
    </ul>
 
    <div id="pagepiling">
        <div class="section" id="section1">
            <h1>GeeksForGeeks</h1>
        </div>
        <div class="section" id="section2">
            <div class="intro">
                <h1>GFG Backgrounds </h1>
                 
<p>All pages with layouts!</p>
 
            </div>
        </div>
        <div class="section" id="section3">
            <div class="intro">
                <h1>Learn Jquery </h1>
                 
<p>Its fun learning plugins.</p>
 
            </div>
        </div>
    </div>
</body>
 
</html>

输出:

jQuery页面堆积插件

例子2:在下面的例子中,顶部和底部的循环功能被启用。为此,loopTop和loopBottom属性被设置为 “true”,如jQuery代码中所示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
    <title>jQuery pagePiling plugin for Looping</title>
    <meta name="Resource-type" content="Document" />
 
    <link rel="stylesheet" type="text/css"
          href="jquery.pagepiling.css" />
    <link rel="stylesheet" type="text/css"
          href="examples.css" />
 
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript" src="jquery.pagepiling.min.js">
    </script>
 
    <script type="text/javascript">
        var deleteLog = false;
 
        (document).ready(function() {
            ('#pagepilingDivID').pagepiling({
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3'],
                sectionsColor: [
                  'green', 'lime', 'forestgreen', 'darkgreen'],
                loopTop: true,
                loopBottom: true
            });
        });
    </script>
</head>
 
<body>
    <ul id="menu">
        <li data-menuanchor="page1" class="active">
            <a href="#page1">Home</a></li>
        <li data-menuanchor="page2">
          <a href="#page2">About</a></li>
        <li data-menuanchor="page3">
          <a href="#page3">Contact</a></li>
    </ul>
 
    <div id="pagepilingDivID">
        <div class="section" id="section1">
            <h1>GeeksForGeeks</h1>
             
<p>Looping through top and bottom is working.</p>
 
        </div>
        <div class="section" id="section2">
            <div class="intro">
                <h1>Page Piling in a Looping style</h1>
                 
<p>To see the looping page piling feature,
                  just use the PgUp and PgDn scroll keys .</p>
 
            </div>
        </div>
        <div class="section" id="section4">
            <div class="intro">
                <h1>Back to the first page after scrolling down.</h1>
                 
<p>And it shows a looping feature, scrolling
                  down till the end gets back the first section.</p>
 
            </div>
        </div>
    </div>
</body>
 
</html>

输出:

jQuery页面堆积插件

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
    <title>
        jQuery pagePiling plugin for
        Horizontal scroll
    </title>
 
    <link rel="stylesheet" type="text/css"
        href="jquery.pagepiling.css" />
 
    <link rel="stylesheet" type="text/css"
        href="examples.css" />
 
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
 
    <script type="text/javascript"
        src="jquery.pagepiling.min.js">
    </script>
 
    <script type="text/javascript">
        (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']
                },
 
            });
        });
    </script>
 
    <style>
        #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;
        }
    </style>
 
</head>
 
<body>
    <ul id="menu">
        <li data-menuanchor="page1" class="active">
            <a href="#page1">Home</a>
        </li>
        <li data-menuanchor="page2">
            <a href="#page2">About</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3">Tutorials</a>
        </li>
    </ul>
 
    <div id="pagepilingDivID">
        <div class="section" id="section1">
            <img src="images/background1.jpg"
                    alt="pagePiling" />
            <br />
 
            <h1>GFG Horizontal Scroll</h1>
             
<p>
                pagePiling also provides
                horizontal scrolling
            </p>
 
 
        </div>
        <div class="section">
            <div class="intro">
                <h1>Highly flexible and configurable</h1>
 
                 
<p>
                    Do the horizontal way of
                    scrolling and check!
                </p>
 
            </div>
        </div>
        <div class="section" id="section3">
            <div class="intro">
                <h1>Very interactive for users</h1>
                 
<p>Great idea to include in websites</p>
 
            </div>
        </div>
    </div>
</body>

</html>

输出:

jQuery页面堆积插件

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程