20150721 全屏切换效果（含核心代码）

通过css使div全屏、实现jquery简单组件开发、重写鼠标滚动事件、切屏动画
1、全屏（css/DOM结构）
竖：height:100%
横：外width:400%内25%  float:left
滚动条消失：overflow：hidden

html, body {
	height: 100%;
	overflow: hidden;
}
#container, .section {
	height: 100%;
	position: relative;
}

.left {
	float: left;
}
#container {
	width: 400%;
}
.section {
	width: 25%;
}

2、组件开发

类级别组件开发 添加foo的全局函数（静态方法） jQuery.foo=function(){}eg:$.Ajax() $.extend()

对象级别组件开发 挂在原型下的方法（动态方法）需创建实例来调用

$.fn.foo=function(){}eg:addClass、attr()

(function($) {
	var defaults = {
		'container' : '#container',// 容器
		'sections' : '.section',// 子容器
		'easing' : 'ease',// 特效方式，ease-in,ease-out,linear
		'duration' : 1000,// 每次动画执行的时间
		'pagination' : true,// 是否显示分页
		'loop' : false,// 是否循环
		'keyboard' : true,// 是否支持键盘
		'direction' : 'vertical',// 滑动的方向 horizontal,vertical,
		'onpageSwitch' : function(pagenum) {
		}
	};

	var win = $(window), container, sections;

	var opts = {}, canScroll = true;

	var iIndex = 0;

	var arrElement = [];

	var SP = $.fn.switchPage = function(options) {
		opts = $.extend({}, defaults, options || {});

		container = $(opts.container), sections = container.find(opts.sections);

		sections.each(function() {
					arrElement.push($(this));
				});

		return this.each(function() {
					if (opts.direction == "horizontal") {
						initLayout();
					}

					if (opts.pagination) {
						initPagination();
					}

					if (opts.keyboard) {
						keyDown();
					}
				});
	}

	// 滚轮向上滑动事件
	SP.moveSectionUp = function() {
		if (iIndex) {
			iIndex--;
		} else if (opts.loop) {
			iIndex = arrElement.length - 1;
		}
		scrollPage(arrElement[iIndex]);
	};

	// 滚轮向下滑动事件
	SP.moveSectionDown = function() {
		if (iIndex < (arrElement.length - 1)) {
			iIndex++;
		} else if (opts.loop) {
			iIndex = 0;
		}
		scrollPage(arrElement[iIndex]);
	};

	// 私有方法
	// 页面滚动事件
	function scrollPage(element) {
		var dest = element.position();
		if (typeof dest === 'undefined') {
			return;
		}
		initEffects(dest, element);
	}

	// 重写鼠标滑动事件
	$(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
	function MouseWheelHandler(e) {
		e.preventDefault();
		var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
		var delta = Math.max(-1, Math.min(1, value));
		if (canScroll) {
			if (delta < 0) {
				SP.moveSectionDown();
			} else {
				SP.moveSectionUp();
			}
		}
		return false;
	}

	// 横向布局初始化
	function initLayout() {
		var length = sections.length, width = (length * 100) + "%", cellWidth = (100 / length)
				.toFixed(2)
				+ "%";
		container.width(width).addClass("left");
		sections.width(cellWidth).addClass("left");
	}

	// 初始化分页
	function initPagination() {
		var length = sections.length;
		if (length) {

		}
		var pageHtml = '<ul id="pages"><li class="active"></li>';
		for (var i = 1; i < length; i++) {
			pageHtml += '<li></li>';
		}
		pageHtml += '</ul>';
		$("body").append(pageHtml);
	}

	// 分页事件
	function paginationHandler() {
		var pages = $("#pages li");
		pages.eq(iIndex).addClass("active").siblings().removeClass("active");
	}

	// 是否支持css的某个属性
	function isSuportCss(property) {
		var body = $("body")[0];
		for (var i = 0; i < property.length; i++) {
			if (property[i] in body.style) {
				return true;
			}
		}
		return false;
	}

	// 渲染效果
	function initEffects(dest, element) {
		var transform = ["-webkit-transform", "-ms-transform",
				"-moz-transform", "transform"], transition = [
				"-webkit-transition", "-ms-transition", "-moz-transition",
				"transition"];

		canScroll = false;
		if (isSuportCss(transform) && isSuportCss(transition)) {
			var traslate = "";
			if (opts.direction == "horizontal") {
				traslate = "-" + dest.left + "px, 0px, 0px";
			} else {
				traslate = "0px, -" + dest.top + "px, 0px";
			}
			container.css({
						"transition" : "all " + opts.duration + "ms "
								+ opts.easing,
						"transform" : "translate3d(" + traslate + ")"
					});
			container
					.on(
							"webkitTransitionEnd msTransitionend mozTransitionend transitionend",
							function() {
								canScroll = true;
							});
		} else {
			var cssObj = (opts.direction == "horizontal") ? {
				left : -dest.left
			} : {
				top : -dest.top
			};
			container.animate(cssObj, opts.duration, function() {
						canScroll = true;
					});
		}
		element.addClass("active").siblings().removeClass("active");
		if (opts.pagination) {
			paginationHandler();
		}
	}

	// 窗口Resize
	var resizeId;
	win.resize(function() {
				clearTimeout(resizeId);
				resizeId = setTimeout(function() {
							reBuild();
						}, 500);
			});

	function reBuild() {
		var currentHeight = win.height(), currentWidth = win.width();

		var element = arrElement[iIndex];
		if (opts.direction == "horizontal") {
			var offsetLeft = element.offset().left;
			if (Math.abs(offsetLeft) > currentWidth / 2
					&& iIndex < (arrElement.length - 1)) {
				iIndex++;
			}
		} else {
			var offsetTop = element.offset().top;
			if (Math.abs(offsetTop) > currentHeight / 2
					&& iIndex < (arrElement.length - 1)) {
				iIndex++;
			}
		}
		if (iIndex) {
			paginationHandler();
			var cuerrentElement = arrElement[iIndex], dest = cuerrentElement
					.position();
			initEffects(dest, cuerrentElement);
		}
	}

	// 绑定键盘事件
	function keyDown() {
		var keydownId;
		win.keydown(function(e) {
					clearTimeout(keydownId);
					keydownId = setTimeout(function() {
								var keyCode = e.keyCode;
								if (keyCode == 37 || keyCode == 38) {
									SP.moveSectionUp();
								} else if (keyCode == 39 || keyCode == 40) {
									SP.moveSectionDown();
								}
							}, 150);
				});
	}
})(jQuery);