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();}}// 窗口Resizevar 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);