leejunhui/gist:dee1942848d88af472c7e5928816616b

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EPUB Reader</title>
  <style>
    /* 样式代码 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-size: 16px;
      font-family: sans-serif;
    }
    #container {
      overflow-x: scroll;
      scroll-behavior: smooth;
      white-space: nowrap;
      display: flex;
      flex-wrap: nowrap;
      width: 100vw;
      height: 100vh;
    }
    .page {
      width: 100vw;
      height: 100vh;
      padding: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
  <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
  <script>
    // 解析 EPUB 文件和渲染
    const book = ePub("book.epub");
    const container = document.getElementById("container");

    book.ready.then(() => {
      const spine = book.spine;
      spine.each((item) => {
        const url = item.url;
        const page = document.createElement("div");
        page.classList.add("page");

        book.get(url).then((content) => {
          const contentHtml = content.trim();
          const doc = new DOMParser().parseFromString(contentHtml, "text/html");
          const body = doc.body;
          const html = body.querySelector("body>*");
          page.appendChild(html);
        });

        container.appendChild(page);
      });
    });

    // 使用 Hammer.js 和 transition 实现平滑滑动效果
    const hammer = new Hammer.Manager(container);
    hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 10 }));

    let startX = 0;
    let currentX = 0;
    let targetX = 0;
    let lastX = 0;
    let isDragging = false;
    let animationId = 0;

    hammer.on("panstart", () => {
      startX = currentX;
      isDragging = true;
      cancelAnimationFrame(animationId);
    });

    hammer.on("panmove", (event) => {
      currentX = startX + event.deltaX;
      container.style.transform = `translateX(${-currentX}px)`;
    });

    hammer.on("panend", (event) => {
      targetX = -Math.round(currentX / window.innerWidth) * window.innerWidth;
      lastX = currentX;

      if (targetX < 0) {
        targetX = 0;
      } else if (targetX > container.scrollWidth - window.innerWidth) {
        targetX = container.scrollWidth - window.innerWidth;
      }

      const distance = Math.abs(targetX - lastX);
      const speed = Math.max(100, Math.min(500, distance / 2));

      container.style.transition = `transform ${speed}ms ease-out`;
      container.style.transform = `translateX(${-
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>EPUB Reader</title>
	<style>
	/* 样式代码 */
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	body {
	font-size: 16px;
	font-family: sans-serif;
	}
	#container {
	overflow-x: scroll;
	scroll-behavior: smooth;
	white-space: nowrap;
	display: flex;
	flex-wrap: nowrap;
	width: 100vw;
	height: 100vh;
	}
	.page {
	width: 100vw;
	height: 100vh;
	padding: 20px;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
	<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
	<script>
	// 解析 EPUB 文件和渲染
	const book = ePub("book.epub");
	const container = document.getElementById("container");

	book.ready.then(() => {
	const spine = book.spine;
	spine.each((item) => {
	const url = item.url;
	const page = document.createElement("div");
	page.classList.add("page");

	book.get(url).then((content) => {
	const contentHtml = content.trim();
	const doc = new DOMParser().parseFromString(contentHtml, "text/html");
	const body = doc.body;
	const html = body.querySelector("body>*");
	page.appendChild(html);
	});

	container.appendChild(page);
	});
	});

	// 使用 Hammer.js 和 transition 实现平滑滑动效果
	const hammer = new Hammer.Manager(container);
	hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 10 }));

	let startX = 0;
	let currentX = 0;
	let targetX = 0;
	let lastX = 0;
	let isDragging = false;
	let animationId = 0;

	hammer.on("panstart", () => {
	startX = currentX;
	isDragging = true;
	cancelAnimationFrame(animationId);
	});

	hammer.on("panmove", (event) => {
	currentX = startX + event.deltaX;
	container.style.transform = `translateX(${-currentX}px)`;
	});

	hammer.on("panend", (event) => {
	targetX = -Math.round(currentX / window.innerWidth) * window.innerWidth;
	lastX = currentX;

	if (targetX < 0) {
	targetX = 0;
	} else if (targetX > container.scrollWidth - window.innerWidth) {
	targetX = container.scrollWidth - window.innerWidth;
	}

	const distance = Math.abs(targetX - lastX);
	const speed = Math.max(100, Math.min(500, distance / 2));

	container.style.transition = `transform ${speed}ms ease-out`;
	container.style.transform = `translateX(${-