前端整屏滚动

最新推荐文章于 2023-11-08 15:07:56 发布

某某某的洛先生

最新推荐文章于 2023-11-08 15:07:56 发布

阅读量782

点赞数

本文链接：https://blog.csdn.net/cc576795555/article/details/86433549

版权

本文详细介绍了如何在前端开发中实现整屏滚动效果，包括使用CSS和JavaScript的关键技巧，以及如何处理滚动事件和动画流畅性，适用于创建现代网页设计中的全屏滚动布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整屏滚动</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">
		$(function(){
			var $h = $(window).height();
			var $pages = $('.pages');
			var $points = $('.points li');
			var len = $pages.length;
			var nowscreen = 0;
			var timer = null;
			$pages.eq(0).addClass('moving');
			$pages.css({height:$h});

			$(window).mousewheel(function(event, data){
				clearTimeout(timer);

				timer = setTimeout(function(){
					if(data == -1){
						nowscreen++;
						if(no