JQuery 页面堆砌

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过各种示例来理解如何创建一个 jQuery 页面堆叠。

什么是 JQuery 页面堆叠？

它是一个 jQuery 插件，用于将布局部分“堆叠”在彼此之上，并通过滚动或侧边项目符号导航来访问它们。它为目标锚点链接提供了平滑的垂直、水平和侧边导航等功能。为此，我们可以使用 PagePiling.js 文件。

以下是 jQuery 页面堆叠的各种示例。

示例 1

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> How to Create PagePilling using JQuery </title>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"> </script>
<style>
*,
*:before {
  transition: 0.35s ease;
}
*:after {
  transition: 0.35s ease;
}
.navbar-fixed {
  position: fixed;
}
nav a {
  text-decoration: none !important;
  color: #aaa;
}
nav ul li a {
  color: #777;
  transition: 0.3s ease;
}
nav ul li a:hover {
  color: #444;
}
.left li.active {
  background: none;
  box-shadow: inset 0 -2px 0 #39cb58;
}
nav ul a:hover {
  background: none;
}
.side-nav li {
  padding: 0;
}
a.brand-logo {
  background-image: url("logo.png");
  height: 100%;
  width: 150px;
  background-size: 100% 100%;
}
.navbar-fixed nav {
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  border-bottom: 1px solid #ccc;
}
.navbar-nav li a {
  font-family: Lato;
  font-size: 14px;
  padding: 20px;
padding: 25px !important; 
}
ul.left.hide-on-med-and-down {
  margin-left: 160px;
}
.mainLinks:first-child {
  padding-right: 0;
}
.side-nav a.mainLinks {
  padding: 5px;
  height: auto;
}
button.center-block {
  display: block;
  width: 90%;
  margin: 0 auto;
}
body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
</style>
<body>
<h1> Example </h1>
		<h2> How to Create PagePilling using Jquery </h2>
		<center>
	<div id = "pagepiling">
  <div class = "section" id = "section1">
    <h1 class = "h2"> Page Pile 1 </h1>
	<button class = "center-block"> Pile 1 </button>
  </div>
  <div class = "section" id = "section2">
    <h1 class = "h2"> Page Pile 2 </h1>
	<button class = "center-block"> Pile 2 </button>
  </div>
  <div class = "section" id = "section3">
    <h1 class = "h2"> Page Pile 3 </h1>
	<button class = "center-block"> Pile 3 </button>
  </div>
  <div class = "section" id = "section4">
    <h1 class = "h2"> Page Pile 4 </h1>
	<button class = "center-block"> Pile 4 </button>
  </div>
  <div class = "section" id = "section5">
    <h1 class = "h2"> Page Pile 5 </h1>
	<button class = "center-block"> Pile 5 </button>
  </div>
</div>
<script>
$(document).ready(function() {
  $('#pagepiling').pagepiling({
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3', 'page4'],
    sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
    navigation: {
      'position': 'right',
      'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
    },
    afterRender: function() {
      $('#pp-nav').addClass('custom');
    },
    afterLoad: function(anchorLink, index) {
      if (index > 1) {
        $('#pp-nav').removeClass('custom');
      } else {
        $('#pp-nav').addClass('custom');
      }
    }
  });	
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了 pagePiling 的基本功能。它支持不同网页布局的交互式滚动。

输出

以下是示例的输出。

示例 2

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> How to Create PagePilling using JQuery </title>
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"> </script>
<style>
body {
    font-family: sans-serif, arial, helvetica;
}
 #pp-nav li .active span {
    background: #bbb;
}
.pp-slidesNav .active span {
    background: #bbb;
}
#pp-nav span {
    border-color: #bbb !important;
}
.pp-slidesNav span {
    border-color: #bbb !important;
}
 .section {
    background-attachment: fixed;
    background-size: auto 80%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
#section1 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/hbr_h_gif_final.gif?as=1&t=635549701220714646);
}
#section2 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/nike%20making%20large.jpg?as=1&t=635616687017735022);
}
#section3 {
    background-image: url(https://dgt5r4zz5sach.cloudfront.net/~/media/images/modules/large/homepage_h_05-notext.jpg?as=1&t=635588424878366703);
}
#section4 .content {
    top: 100%;
    position: absolute;
    left: 0;
}
#pp-nav li .active span {
    background: #200c32;
}
body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
body {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
 #arrow {
    width: 100%;
    height: 80px;
    text-align: center;
    cursor: pointer;
	font-weight: bold;
    position: fixed;
    bottom: 0;
    left: 0;
    border: 0;
    outline: 0;
    z-index: 100;
    color: red;
    background: transparent;
    -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
    font: 66px Heiti, 'Lucida Grande', Arial;
    font-weight: bold;
}
#arrow span {
    display: inline-block;
    position: relative;
    top: -18px;
    -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#arrow:hover {
    background: #EC008C;
}
#arrow:hover span {
    top: 0;
    color: #FFF;
}
 .intro {
    position: absolute;
    bottom: 100px;
    text-align: center;
    width: 100%;
}
.intro h1 {
    font-size: 5em;
    font-weight: bold;
    color: #000;
}
#section4 .intro {
    color: #000;
	background-color: #bbb;
}
.pp-scrollable {
background-color: #bbb;
}
 .header {
    padding-top: 80px;
    text-align: center;
}
.header h1 {
    font-size: 5em;
    font-weight: bold;
    color: #fff;
}
.header p {
    color: #f2f2f2;
    font-size: 1.7em;
}
.page {
    width: 80%;
    margin: 60px auto;
    background:white;
    padding: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page p {
    font-style: 12px;
    margin: 20px 0 0 0;
    line-height: 1.35em;
    color: #333;
}
body {
  background-color: #555;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
 color: black;
  margin: 20px;
   text-align: center; 
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h3 {
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
h2 { 
text-align: center; 
color: #26a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: bold; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
button.center-block {
  margin-top: 20px;
  display: block;
  width: 60%;
  line-height: 2em;
  background: rgba(114,212,202,1);
  border-radius: 5px;
  border: 0;
  border-top: 1px solid #B2ECE6;
  box-shadow: 0 0 0 1px #46A294, 0 2px 2px #808389;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 0 1px 2px #21756A;
}
button.center-block:hover {
 background: linear-gradient(to bottom, rgba(107,198,186,1) 0%,rgba(57,175,154,1) 100%);  
}
button.center-block:active {
  box-shadow: inset 0 0 5px #000;
  background: linear-gradient(to bottom, rgba(57,175,154,1) 0%,rgba(107,198,186,1) 100%); 
}
button.center-block:focus {
    outline: none;
    border-color: green;
}
</style>
<body>
<h3> Example </h3>
		<h2> How to Create PagePilling using JQuery </h2>
		<center>
	<button id = "arrow"> <span> ? </span>
</button>
<div id = "pagepiling">
    <div class = "section" id = "section1">
        <div class = "intro">
            	<h1> Pile 1. </h1> 
        
        </div>
    </div>
    <div class = "section" id = "section2">
        <div class = "intro">
            	<h1> Pile 2. </h1>
        </div>
    </div>
    <div class = "section" id = "section3">
        <div class = "intro">
             <h1> Pile 3. </h1>         
        </div>
    </div>
    <div class = "section pp-scrollable" id = "section4">
        <div class = "intro">
             <h1> Pile 3. </h1>         
        </div>
    </div>
</div>
<script>
$('#pagepiling').pagepiling({
    verticalCentered: false,
    css3: false,
    sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
    onLeave: function (index, nextIndex, direction) {
        $('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');
        $('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');
        if (nextIndex == 4) {
            $('#arrow').hide();        
            $('#pp-nav').fadeOut();
            $('#section4').find('.content').animate({
                top: '0%'
            }, 700, 'easeInQuart');
        }       
        if (index == 4) {
            $('#arrow').show();         
            $('#pp-nav').fadeIn();
            $('#section4 .content').animate({
                top: '100%'
            }, 700, 'easeInQuart');
        }
    },
});
$('#arrow').click(function () {
    $.fn.pagepiling.moveSectionDown();
});
</script>
</body>
</html>

解释

在上面的示例中，我们创建了 pagePiling 的基本功能。它支持通过向下箭头、滚动和侧边导航进行不同网页布局的交互式滚动。

输出

以下是示例的输出。

下一主题使用 HTML、CSS 和 jQuery 生成二维码

JQuery 页面堆砌

什么是 JQuery 页面堆叠？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 页面堆砌

什么是 JQuery 页面堆叠？

示例 1

示例 2

相关帖子

如何在 jQuery 中获取文本框值

Jquery 倒计时器

JQuery 输入掩码电话号码验证

使用 Jquery 的日夜切换

jQuery 推送通知插件

使用 jQuery 自动刷新或重新加载页面

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

使用 JQuery Ajax 的动态拖放表行

Pietimer jQuery 插件

使用 HTML、CSS 和 jQuery 的 QR 码生成器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器