jquery横向纵向鼠标滚轮全屏切换

   Section One

   Section Two

   Section Three

   Section Three

   Section Three

   Section Three

   Section Three

   Section Three

   Section Three

   Section Three

$(function(){

$("#container").switchPage({

'loop' : true,

'keyboard' : true,

'direction' : 'vertical'

});

});

h1, body, html {

padding:0;

margin:0;

}

html, body {

height:100%;

overflow:hidden;

}

h1{

font-size:2em;

font-weight:normal;

}

#container, .section {

height:100%;

position:relative;

}

#section0, #section1, #section2, #section3{

background-color:#000;

background-size: cover;

background-position:50%50%;

}

#section0{

background-color:#024BCE;

color:#fff;

text-shadow:1px1px1px#333;

}

#section1{

color:#fff;

text-shadow:1px1px1px#333;

background-color:#31B81D;

}

#section2{

background-color:#01B5F0;

color:#fff;

text-shadow:1px1px1px#666;

}

#section3{

color:#008283;

background-color:#5D0FF1;

text-shadow:1px1px1px#fff;

}

#section4{

color:#fff;

text-shadow:1px1px1px#333;

background-color:#31B81D;

}

#section5{

background-color:#01B5F0;

color:#fff;

text-shadow:1px1px1px#666;

}

#section6{

color:#008283;

background-color:#5D0FF1;

text-shadow:1px1px1px#fff;

}

#section7{

color:#fff;

text-shadow:1px1px1px#333;

background-color:#31B81D;

}

#section8{

background-color:#01B5F0;

color:#fff;

text-shadow:1px1px1px#666;

}

#section9{

color:#008283;

background-color:#5D0FF1;

text-shadow:1px1px1px#fff;

}

.intro {

position:absolute;

top:50%;

width:100%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

text-align:center;

}

/*右侧导航*/

#pages {

position:fixed;

right:10px;

top:50%;

list-style:none;

}

#pages li {

width:8px;

height:8px;

border-radius:50%;

background:#fff;

margin:0010px5px;

}

#pages li.active {

width:14px;

height:14px;

border:2pxsolid#FFFE00;

background:none;

margin-left:0;

}

#section0.title {

-webkit-transform: translateX(-100%);/*内容旋转*/

transform: translateX(-100%);

-webkit-animation: sectitle01s ease-in-out100ms forwards;

animation: sectitle01s ease-in-out100ms forwards;/*滑入页面*/

}

/*为支持上述滑入特效写的*/

@-webkit-keyframes

sectitle0{0%{

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

}

100%{

-webkit-transform: translateX(0);

transform: translateX(0);

}

}

@keyframes

sectitle0{0%{

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

}

100%{

-webkit-transform: translateX(0);

transform: translateX(0);

}

}

(function($) {

 vardefaults = {

 '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) {}

 };

 varwin = $(window);

 variIndex = 0;//当前section的索引

 vararrElement = [];

 varcanScroll =true;

 varcontainer;

 varsections;

 varopts;

 varflag=false;

 varSP = $.fn.switchPage =function(options) {

 opts = $.extend({}, defaults, options || {});

 container = $(opts.container);

 sections = container.find(opts.sections);

 sections.each(function() {

  arrElement.push($(this));

 });

 returnthis.each(function() {

  if(opts.direction =='horizontal') initLayout();

  if(opts.pagination) initPagination();

 })

 }

 //重置鼠标滚轮事件

 $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);

 functionMouseWheelHandler(e) {

 e.preventDefault();

 varvalue = e.originalEvent.wheelDelta || -e.originalEvent.detail;

 vardelta = Math.max(-1, Math.min(1, value));

 if(canScroll) {

  if(delta < 0) {

  SP.moveSectionDown();

  }else{

  SP.moveSectionUp();

  }

 }

 returnfalse;

 }

 //向上一张移

 SP.moveSectionUp =function() {

 if(iIndex) {

  iIndex--;

 }elseif(opts.loop) {

  iIndex = arrElement.length - 1;

 }

 scrollPage(arrElement[iIndex]);

 }

 //向下一张移

 SP.moveSectionDown =function() {

 if(iIndex < (arrElement.length - 1)) {

  iIndex++

 }elseif(opts.loop) {

  iIndex = 0;

 }

 scrollPage(arrElement[iIndex]);

 }

 //当设置横向移动时初始化横向页面

 functioninitLayout() {

 varwidth = (sections.length * 100) +'%',

  cellwidth = (100 / sections.length).toFixed(2) +'%';

 // container.width(width).addClass('left');

 container.width(width);

 sections.width(cellwidth).addClass('left');

 }

 //导航条初始化 hovertree.com

 functioninitPagination() {

 varlength = sections.length;

 varpageHtml ='

'

 for(vari = 1; i < length; i++) pageHtml +='

';

 pageHtml +='

 $("body").append(pageHtml);

 flag=true;

 if(flag==true){

 $("li").click(function(){

  varliId = $(this).attr("id");

  vararr = liId.split('_');

  iIndex=arr[1];

  scrollPage(arrElement[iIndex]);

 });

 }

 }

 /*跳转到dot对应页面*/

 functionclickDot(){

 }

 //移动页面

 functionscrollPage(element) {

 vardest = element.position();

 if(dest == void 0)return;

 initEffects(dest, element);

 }

 functionisSupportCss(property) {

 varbody = $('body')[0];

 for(vari = 0; i < property.length; i++) {

  if(property[i]inbody.style) {

  returntrue;

  }

 }

 returnfalse;

 }

 //移动页面的核心函数

 functioninitEffects(dest, element) {

 canScroll =false;

 vartranslate ="";

 if(opts.direction =='horizontal') {

  translate ='-'+ dest.left +'px, 0px, 0px';

 }else{

  translate ='0px, -'+ dest.top +'px, 0px';

 }

 container.css({

  'transform':"translate3d("+ translate +")",

  'transition':"all "+ opts.duration +"ms "+ opts.easing

 });

 container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend",function() {

  canScroll =true;

 });

 element.addClass("active").siblings().removeClass('active');

 if(opts.pagination) {

  paginationHandler();

 }

 }

 //每次页面移动时，修改导航栏 何问起

 functionpaginationHandler() {

 varpages = $('#pages li');

 pages.eq(iIndex).addClass('active').siblings().removeClass('active');

 }

 varresizeId;

 win.resize(function() {

 clearTimeout(resizeId);

 resizeId = setTimeout(function(){

  rebuild();

 }, 500);

 });

 functionrebuild() {

 varcurrentHeight = win.height();

 varcurrentWidth = win.width();

 varelement = arrElement[iIndex];

 if(opts.direction =="horizontal") {

  varoffsetLeft = element.offset().left;

  if(Math.abs(offsetLeft) > (currentWidth/2) && iIndex < (arrElement.length - 1)){

  iIndex++

  }

 }else{

  varoffsetTop = element.offset().top;

  if(Math.abs(offsetTop) > (currentHeight/2) && iIndex < (arrElement.length - 1)){

  iIndex++

  }

 }

 varcurrentElement = arrElement[iIndex],

 dest = currentElement.position();

 initEffects(dest, currentElement);

 if(opts.pagination) paginationHandler();

 }

})(jQuery);