用html、css和jQuery实现图片翻页的特效

以下是一个简单的使用HTML、CSS和jQuery实现的图片翻页特效示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flipbook</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div class="flipbook">
  <div class="page" style="background-image: url('image1.jpg');"></div>
  <div class="page" style="background-image: url('image2.jpg');"></div>
  <div class="page" style="background-image: url('image3.jpg');"></div>
  <!-- Add more pages here if needed -->
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




.flipbook {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}
 
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1.0s;
  background-size: cover;
  background-position: center;
}
 
.page.flip {
  transform: rotateY(-180deg);
}

jQuery (script.js):




$(document).ready(function() {
  var currentPage = 1;
  var numPages = $('.page').length;
 
  $('.page').click(function() {
    if (currentPage === 1) {
      $('.page').eq(numPages - 1).addClass('flip');
      currentPage = numPages;
    } else if (currentPage === numPages) {
      $('.page').eq(0).addClass('flip');
      currentPage = 1;
    } else {
      $('.page').eq(currentPage - 2).addClass('flip');
    }
  });
});

这个简单的例子使用了类 .flipbook 包裹所有的 .page 元素，每个 .page 元素都是一个页面，通过点击页面进行翻转。当翻转发生时，通过添加 .flip 类来改变页面的 transform 属性，从而创建翻页效果。这个例子没有包含所有的错误处理和完善功能，例如边界条件检查和动画完成的事件监听等，但足以展示基本的翻页特效实现。

用html、css和jQuery实现图片翻页的特效

评论已关闭

推荐阅读