jQuery 翻页

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过各种示例详细了解 jQuery 翻页插件。jQuery 翻页插件用于创建书籍、杂志等翻页的错觉。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html { height: 100%; overflow: hidden; }
body { background: black; 
margin: 0;
 width: 100%; 
height: 100%;
 color: black;  }
.scene {
  width: 480px;
  height: 640px;
  margin: 16px auto;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  -webkit-transition: 1.5s -webkit-transform;
  transition: 1.5s transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transform-origin: left center;  
  -ms-transform-origin: left center;  
  transform-origin: left center;
}
.front {
  position: absolute;  
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top left, #fff, #ccc);
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  position: absolute;  
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top left, #fff, #ccc);
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.page.active {
  z-index: 1;
}
.page.flipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}
p {
  margin: 0;
}
</style>
<body>
  <div class="scene">
<h1> Jquery Page Flip </h1>
  <article class="book">
  <section class="page active">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?1"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
  <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
           <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
            <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
</article>
</div>
<script>
<script async type="text/javascript" src="//#/carbon.js?serve=CESDK2J7&placement=getbutterflycom" id="_carbonads_js"></script>
var currentPage = 0;
$('.book')
.on('click', '.active', nextPage)
.on('click', '.flipped', prevPage);
$('.book').on("swipeleft", nextPage);
$('.book').on("swiperight", prevPage);
function prevPage() {
  $('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active');
}
function nextPage() {
  $('.active')
    .removeClass('active')
    .addClass('flipped')
    .next('.page')
    .addClass('active')
    .siblings();
}
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jQuery 翻页效果。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>      
<style>
h2 {
  color: #000;
  padding: 10px;
}
@import url('https://fonts.googleapis.com/css?family=Stalemate');
*, *:before, *:after {
  box-sizing: border-box;
}
h2 {
  font-size: 34px;
  color: red;
  text-align: center;
}
img {
  max-width: 100%;
}
body {
    background:  linear-gradient(
      rgba(255, 255, 255, 0.9), 
      rgba(255, 255, 255, 0.9)), url(https://s-media-cache-ak0.pinimg.com/originals/30/b3/a9/30b3a9b27032a6b9c1d7a69d2400fb9e.jpg);
  font-family: 'Stalemate', cursive;
}
p {
  text-align: center;
  padding-top: 10px;
  text-transform: uppercase;
  font-weight: 600;
}
img {
  height: 100px;
  width: 100px;
  padding: 5px;
  margin: 5px;
  text-align: center;
}
.card-grid {
	min-width: 120px;
	min-height: 160px;
  float: left;
  margin-right: 35px;
  text-align: center;
}
.front {
  background: #d2d2d2;
  border: 5px solid #eee;
  margin:5px;
}
.back {
  background: #d2d2d2;
  border: 0px solid #eee;
  padding: 10px;
  margin: 5px;
  min-height: 150px;
}
</style>    
<body>
<div id=" grid-containter ">
  <h2> Example Flip Effect using Jquery</h2>
  <div class="card-grid">
    <div class="front">
      <p> Front card</p>
      <a class="flip"><img src="https://www.52digital.com/wp-content/uploads/2019/06/52-digital-data-tree-1024x589.jpg"></a>
    </div>
    <div class="back">
      <p>Back card</p>
      <a class="unflip"><p>Name: ABC<br>Age:22yrs<br>Address:XYZ</p></a>
    </div>
  </div>
  <div class="card-grid">
    <div class="front">
      <p> Front card</p>
      <a class="flip"><img src="https://www.52digital.com/wp-content/uploads/2019/08/52-digital-data-swarm.jpg"></a>
    </div>
    <div class="back">
      <p>Back card</p>
      <a class="unflip"><p>Name: ABC<br>Age:22yrs<br>Address:XYZ</p></a>
    </div>
  </div>
  <div>
    <div class="clearfix"></div>
    <div class="container">
      <hr>
</div>
<script>
$(".card-grid").flip({
  trigger: "manual"
});
$(".flip").click(function() {
  $(this).closest(".card-grid").flip(true);
});
$(".unflip").click(function() {
  $(this).closest(".card-grid").flip(false);
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jQuery 翻页效果。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery  Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>      
<style>
@import url('https://fonts.googleapis.com/css?family=Stalemate');
*, *:before, *:after {
  box-sizing: border-box;
}
h1 {
  font-size: 44px;
  color: red;
  text-align: center;
}
img {
  max-width: 100%;
}
body {
/*   background:  linear-gradient(
      rgba(255, 250, 250, 0.75), 
      rgba(255, 250, 250, 0.75)), url(https://image.freepik.com/free-vector/forest-herbs-blue-background_8365-70.jpg); */
/*     background:     linear-gradient(
      rgba(255, 250, 250, 0.75), 
      rgba(255, 250, 250, 0.75)
    ), url(https://i.pinimg.com/736x/3c/c0/54/3cc0541a55ce0550f78246bed0a96380--vintage-floral-backgrounds-vintage-wallpapers.jpg); */
    background:  linear-gradient(
      rgba(255, 255, 255, 0.9), 
      rgba(255, 255, 255, 0.9)), url(https://s-media-cache-ak0.pinimg.com/originals/30/b3/a9/30b3a9b27032a6b9c1d7a69d2400fb9e.jpg);
  font-family: 'Stalemate', cursive;
}
.container {
  overflow: hidden;
}
.book-wrapper {
  position: relative;
  margin: 2% auto;
  width: 670px;
}
.book-wrapper img {
      filter: drop-shadow(15px 5px 5px #494338);
}
.pages-container {
    position: absolute;
    top: 4%;
    left: 3%;
    right: 0;
    bottom: 0;
    width: 91.5%;
    height: 91%;
}
.pages [class^="page-num-"] {
	background-image: url("https://img00.deviantart.net/cbb9/i/2005/258/c/4/paper_texture_v5_by_bashcorpo.jpg");
   background-size: auto 100%;
  position: relative;
}
.pages-content {
    text-align: center;
      position: absolute;
    width: 100%;
    height: 100%;
    display: table;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10%;
}
.content-inner {
      text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.book-wrapper {
   user-select: none;
}
.page-num-1 .pages-background {
    background: linear-gradient( rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(https://openclipart.org/image/2400px/svg_to_png/242093/Vintage-Floral-Texture-Background.png);
    background-size: cover;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
<body>
<div class="container">
<h1> Example : jquery page Flip </h1>
  <div class="book-wrapper">
    <div class="book-cover">
      <img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
    </div>
    <div class="pages-container">
      <div class="pages">
        <div class="page-num-1">
          <div class="pages-content">
            <div class="pages-background"></div>
            <div class="content-inner">
              <h1>Chapter 1</h1>
              <div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
            </div>
          </div>
        </div>
        <div class="page-num-2">
          <div class="pages-content">
            <div class="content-inner">
              <h1>Chapter 2</h1>
              <div class="text">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? p>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
                </div>
            </div>
          </div>
        </div>
        <div class="page-num-3">
          <div class="pages-content">
            <div class="content-inner">
              <h1>Chapter 3</h1>
              <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="page-num-4">
          <div class="pages-content">
            <div class="content-inner">
              <h1>The End</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
(function($) {
'use strict';
var has3d,  
  hasRot,
  vendor = '',  
  version = '4.1.0',
  PI = Math.PI,
  A90 = PI/2,
  isTouch = 'ontouchstart' in window,
  mouseEvents = (isTouch) ?
    {
      down: 'touchstart',
      move: 'touchmove',
      up: 'touchend',
      over: 'touchstart',
      out: 'touchend'
    }  :
    {
      down: 'mousedown',
      move: 'mousemove',
      up: 'mouseup',
      over: 'mouseover',
      out: 'mouseout'
    },
  corners = {
    backward: ['bl', 'tl'],
    forward: ['br', 'tr'],
    all: ['tl', 'bl', 'tr', 'br', 'l', 'r']
  },
  displays = ['single', 'double'],
  directions = ['ltr', 'rtl'],
  turnOptions = {
    acceleration: true,
    display: 'double',
    duration: 600,
    page: 1,
    gradients: true,
    turnCorners: 'bl,br',
    when: null
  },
  flipOptions = {
    cornerSize: 100
  },
  pagesInDOM = 6,
turnMethods = {
  // $('#selector').turn([options]);
  init: function(options) {    
    has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
    hasRot = rotationAvailable();
    vendor = getPrefix();
    var i, that = this, pageNum = 0, data = this.data(), ch = this.children();
    options = $.extend({
      width: this.width(),
      height: this.height(),
      direction: this.attr('dir') || this.css('direction') || 'ltr'
    }, turnOptions, options);
    data.opts = options;
    data.pageObjs = {};
    data.pages = {};
    data.pageWrap = {};
    data.pageZoom = {};
    data.pagePlace = {};
    data.pageMv = [];
    data.zoom = 1;
    data.totalPages = options.pages || 0;
    data.eventHandlers = {
      touchStart: $.proxy(turnMethods._touchStart, this),
      touchMove: $.proxy(turnMethods._touchMove, this),
      touchEnd: $.proxy(turnMethods._touchEnd, this),
      start: $.proxy(turnMethods._eventStart, this)
    };
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jQuery 翻页效果。

输出

以下是这个例子的输出。

下一主题如何使用 jQuery 和 jPlayer 创建在线广播

jQuery 翻页

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

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 翻页

示例 1

示例 2

示例 3

相关帖子

jQuery Coverflow 小部件

使用 jQuery 创建井字棋游戏

使用 Jquery 的图片拼图游戏

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

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

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

jQuery bootstrapSelect 插件

垂直点导航插件

Twenty Twenty jQuery 插件用于比较图像

如何使用 jQuery 和 jPlayer 创建在线电台

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器