最最最基础的一个全屏滚屏,

###做一个最简单的全屏滚屏
核心代码其实就一句话…

---

页面上就一个父元素box包裹着3个子元素

	//页面架构
	<div id="box">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</div>

---

引用jQuery和jQ的mousewheel

<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>

获得屏幕的高宽,可以动态设置3个子div的高和宽,高为屏幕高宽为屏幕宽,

	var height = $(window).height(),
		width = $(window).width();

//苦力工作,略过
	$("#d1").css({
				"width":width,
				"height":height,
				"background":"#ddd"
			})
			$("#d2").css({
				"width":width,
				"height":height,
				"background":"#1de"
			})
			$("#d3").css({
				"width":width,
				"height":height,
				"background":"#d2f"
			})

然后

	var key = 0;//声明一个监听屏幕位置的变量
	//调用mousewheel事件 
	$(document).mousewheel(function(e,delta){
		//当鼠标滚轮向上滚时delta为1  向下滚时为-1
		console.log(delta)
	}

其实上面的都不用看,看懂下面这句就OK了,
我们就是利用回调函数的delta来实现判断滚屏方向以及距离

	$(document).mousewheel(function(e,delta){
		if(!$("#box").is(":animated")){
		
			//每次滚动的时候都会根据滚动方向来修改全局变量key
			key = key-delta;
			
			//设定范围防止数值溢出 范围设定为0-2如果有多个需要滚动的屏幕可加大范围
			if(key<0){
				key=0;
			}else if(key==3){
				key=2;
			}
			console.log(key);

			//核心的一句话 
			//首先父元素取消所有动画.shop(true)
			//然后父元素添加一个动画 在1秒内滚动key个屏幕 .animate({"top":-hei*key},1000);
			$("#box").stop(true).animate({"top":-hei*key},1000);
			}
		})
			

---

是不是很简单?
自勉