全屏滚动的实现

最新推荐文章于 2023-05-31 16:14:37 发布

江户香葱饼

最新推荐文章于 2023-05-31 16:14:37 发布

阅读量2.3k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/lolgenius/article/details/79719644

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是全屏滚动？

所谓全屏滚动，就是网页的一个模块占据一屏的宽高，多个模块上下拼接在一起，当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应的页面

全屏滚动实现的主要思想：

响应鼠标事件，页面通过CSS的动画效果，进行移动。

HTML：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	  #main{
		overflow-x:hidden;overflow-y:hidden;width:100%;position:absolute;
	  }
  </style>
 </head>
 <body>
 <div id="wrap">  
	<div id="main">  
		<div id="page1" class="page" style="background-color:red"></div>  
		<div id="page2" class="page" style="background-color:blue"></div>  
		<div id="page3" class="page" style="background-color:yellow"></div>  
		<div id="page4" class="page" style="background-color:green"></div>  
	</div>      
</div>  
<script src="jquery.min.js"></script>
<script src="screen.scroll.js"></script>
 <script type="text/javascript">
	(function(){
		var navHeight = $(window).height();
		$(".page").height(navHeight);
	})();
 </script>
 </body>
 
</html>

var page_index = 0;
var page_id = new Array();
page_id[0] = "page1"; 
page_id[1] = "page2";
page_id[2] = "page3";
page_id[3] = "page4";
var screen_height = $(window).height();
var doScroll = true;
var speed = 1000;
(function(){
	var oDiv = document.getElementById('main');

	function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
		var ev = ev || window.event;
		var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
			down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
		if(doScroll){
			if(down){
			if(page_index!=3){
				doScroll = false;
				page_index++;
				$("#main").animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });//当响应向下滚动事件的时候，将doScroll设置成false，控制在这次响应过程中，不再响应其他滚轮事件，当这次事件执行结束后（1000ms后），再讲doScroll恢复成true，准备响应下次滚动。
			}
			}else{
				if(page_index!=0){
					doScroll = false;
					page_index--;
					$("#main").animate({top:-page_index*screen_height},speed,function() {
                doScroll = true;
            });
				}
			}
			if(ev.preventDefault){/*FF 和 Chrome*/
				ev.preventDefault();// 阻止默认事件
			}
		}
		
		return false;
	}
	addEvent(oDiv,'mousewheel',onMouseWheel);
	addEvent(oDiv,'DOMMouseScroll',onMouseWheel);

})();
function addEvent(obj,xEvent,fn) {
	if(obj.attachEvent){
		obj.attachEvent('on'+xEvent,fn);
	}else{
		obj.addEventListener(xEvent,fn,false);
	}
}

记得引用JQuery

江户香葱饼

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
全屏滚动的实现

什么是全屏滚动？所谓全屏滚动，就是网页的一个模块占据一屏的宽高，多个模块上下拼接在一起，当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应的页面全屏滚动实现的主要思想：响应鼠标事件，页面通过CSS的动画效果，进行移动。HTML：<!doctype html><html lang="en"> <head> <meta charse...
复制链接

扫一扫