jQuery插件 - myFullPage

HTML 

	
	


	

		
1
		

			
2-1
			
2-2
			
2-3
		
		
3
	
	
	
	

myFullPage.js

//实例方法
$.fn.extend({
	myFullpage:function(config){
		var colorArr = config.colorArr;
		var $W = $(this);
		var $section = $W.find('.section');
		var clientWidth = $(window).outerWidth();
		var clientHeight = $(window).outerHeight();
		var conmmonStyle = {
			width:'100%',
			height:'100%',
		}
		var curIndex = 0;//当前页面
		var lock = true;
		//初始化样式
		$('html')
			.add('body')
				.css({
					position:'relative',
					overflow: 'hidden',
					margin:0
				})
			.add($W)
			.add($section)
				.css(conmmonStyle);
		$W.css({
			position: 'absolute',
			top: 0,
			left: 0
		})
			.find('.section')
				.each(function(index,ele){
					$(ele).css({
						backgroundColor:colorArr[index],
						position:'relative'
					}).find('.slider')
						.css({float: 'left',width:clientWidth,height:clientHeight})
						.wrapAll('
')
				});
		$section.find('.sliderWrapper')
			.each(function(index,ele){
				$(ele).css({width:$(ele).find('.slider').size() * clientWidth,height:clientHeight});
			})
		
		//active
		//先给第一个section active
		//给每一个section 下面的第一个slider innerActive
		//类名初始化
		$section.eq(0)
			.addClass('active')
				.end().find('.sliderWrapper').css({
					position:'absolute',
					top:0,
					left:0
				}).each(function(index,ele){
					$(ele).find('.slider').eq(0).addClass('innerActive')
				})
		
		//控制移动
		$(document).on('keydown',function(e){
			//e.which
			//left 37 top 38 right 39 bottom 40
			if(e.which == 38 || e.which == 40){//垂直移动 $W
				if(lock){
					lock = false;
					var newTop = $W.offset().top;
					if(e.which == 38 && curIndex != 0){//向上
						config.onLeave(curIndex);
						curIndex--;
						newTop += clientHeight;
						
					}else if(e.which == 40 && curIndex != $section.size() - 1){//向下
						config.onLeave(curIndex);
						curIndex++;
						newTop -= clientHeight;
					}
					//页面切换
					$W.animate({
						top:newTop
					},300,'swing',function(){
						lock = true;
						$('.fullPageWrapper .active:eq(0)').removeClass('active');
						$section.eq(curIndex).addClass('active');
						config.afterLoad(curIndex)
					})
				}
			}
			if(e.which == 37 || e.which == 39){//水平移动 sliderWrapper
				if(lock && $section.eq(curIndex).find('.slider').size() > 0){
					lock = false;
					var $SW = $('.active').find('.sliderWrapper');
					var curShowDom = $SW.find('.innerActive');
					var newLeft = $SW.offset().left;
					var direction = null;
					if(e.which == 37 && curShowDom.index() != 0){//向左
					newLeft += clientWidth;
					direction = 'left';	
					}else if(e.which == 39 && curShowDom.index() != $SW.find('.slider').size() - 1){//向右
						newLeft -= clientWidth;
						direction = 'right';
					}
					//页面切换
					$SW.animate({
						left:newLeft
					},200,'swing',function(){
						lock = true;
						direction == null?'':curShowDom.removeClass('innerActive');
						$SW.eq(curIndex).addClass('innerActive')
						if(direction == 'left'){
							curShowDom.prev().addClass('innerActive')
						}else{
							curShowDom.next().addClass('innerActive')
						}
					})
				}
			}
		})
		
		//滚轮监听
		$(document).on('mousewheel DOMMouseScroll', onMouseScroll);
		function onMouseScroll(e){
			e.preventDefault();
			var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
			var delta = Math.max(-1, Math.min(1, wheel) );
			if(delta<0){//向下滚动
				if(lock && curIndex != $section.size() - 1){
					lock = false;
					var newTop = $W.offset().top;
					config.onLeave(curIndex);
					curIndex++;
					newTop -= clientHeight;
					//页面切换
					$W.animate({
						top:newTop
					},300,'swing',function(){
						lock = true;
						$('.fullPageWrapper .active:eq(0)').removeClass('active');
						$section.eq(curIndex).addClass('active');
						config.afterLoad(curIndex)
					})
				}
			}else{//向上滚动
				if(lock && curIndex != 0){
					lock = false;
					var newTop = $W.offset().top;
					config.onLeave(curIndex);
					curIndex--;
					newTop += clientHeight;
					//页面切换
					$W.animate({
						top:newTop
					},300,'swing',function(){
						lock = true;
						$('.fullPageWrapper .active:eq(0)').removeClass('active');
						$section.eq(curIndex).addClass('active');
						config.afterLoad(curIndex)
					})
				}
			}    
		}
		
	}
})

以上是我自己写的全屏滚动插件，想下载完整版可以到 http://www.dowebok.com/77.html