HTML的上下翻页效果

雪耶

于 2023-12-21 08:42:04 发布

阅读量676

点赞数 8

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/hh20070221/article/details/135121902

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻页效果</title>

	<style>
/* 设置页面容器的高度，使其可以滚动 */
    .page-container {
      height:900px;
		width: 100%;
      overflow: hidden;
		
    }

    /* 设置每个页面的高度和样式 */
    .page {display: flex;
      height: 900px;
		overflow: hidden;
		justify-content: center;
		text-align: center;
		align-items: center;
		color:aliceblue;
    }
		#one{
			background: #ED6C6E;
		}#two{
			background: #54C177;
		}#san{
			background: #3175D5;
		}#shi{
			background:#E5630F;
		}
		
		h1{
			transform: translatey(1000px);
			transition: 0.75s;
		}
		
		#one:hover h1{
			transform: translatey(0);
			transition: 0.45s;
			font-size: 10rem;
		}
		#two:hover h1{
			transform: translatey(0);
			transition: 0.45s;
			font-size: 10rem;
		}
		#san:hover h1{
			transform: translatey(0);
			transition: 0.45s;
			font-size: 10rem;
		}
		#shi:hover h1{
			transform: translatey(0);
			transition: 0.45s;
			font-size: 10rem;
		}
	</style>
</head>

<body>
	 <div class="page-container">
    <!-- 第一页 -->	
	
    <div id="one"  class="page"> 
		<h1>翻</h1>
		 </div>
		 
		 <div id="two" class="page"> 
			 <h1>页</h1>
		 </div>
		 
		 <div id="san" class="page">
			 <h1>效</h1>
		 </div>
		 
		 <div id="shi" class="page"> 
			 <h1>果</h1>
		 </div>
		 </div>
	
</body>
</html>
<script>
// 使用JavaScript监听滚动事件，实现上下滚动翻页的效果
    const container = document.querySelector('.page-container');
    const pages = container.querySelectorAll('.page');
    let currentPageIndex = 0;

    // 滚动到下一页
    function scrollToNextPage() {
      if (currentPageIndex < pages.length - 1) {
        currentPageIndex++;
        container.scrollTo({
          top: pages[currentPageIndex].offsetTop,
          behavior: 'smooth'
        });
      }
    }

    // 滚动到上一页
    function scrollToPreviousPage() {
      if (currentPageIndex > 0) {
        currentPageIndex--;
        container.scrollTo({
          top: pages[currentPageIndex].offsetTop,
          behavior: 'smooth'
        });
      }
    }

    // 监听鼠标滚动事件
    container.addEventListener('wheel', function(event) {
      event.preventDefault();

      const delta = event.deltaY;

      if (delta > 0) {
        scrollToNextPage();
      } else {
        scrollToPreviousPage();
      }
    });

    // 监听触摸滑动事件（适用于触摸屏设备）
    let touchStartY = 0;
    container.addEventListener('touchstart', function(event) {
      touchStartY = event.touches[0].clientY;
    });

    container.addEventListener('touchmove', function(event) {
      event.preventDefault();

      const touchMoveY = event.touches[0].clientY;

      if (touchMoveY - touchStartY > 50) {
        scrollToNextPage();
        touchStartY = touchMoveY; // 更新起始触摸位置
      } else if (touchMoveY - touchStartY < -50) {
        scrollToPreviousPage();
        touchStartY = touchMoveY; // 更新起始触摸位置
      }
    });
</script>