回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。
      参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。
      代码如下:
html
window对象滚动插件 stage1 stage2 stage3 stage4 stage5
page1 page2 page3

css
@charset utf-8;/* css document */body{ margin:0 0; padding:0 0; height:100%; width:100%; overflow: hidden;;}.wrap{ font-family:微软雅黑,宋体, times, times new roman, serif; font-size:14px; margin:0 0; padding:0 0; height:100%; width:100%; overflow:hidden;}.stage,.page{ width: 100%; height: 100%;}.stage1{ background-color:red;}.stage2{ background-color:#fff;}.stage3{ background-color:yellow;}.stage4{ background-color:green;}.stage5{ background-color:blue;}.page{ float: left;}.page2{ background-color: #666;}.page3{ background-color: #ddd;}.stagecontrol{ position: fixed;}.stagecontrol ul li{ width: 100px; height: 30px; line-height: 30px; text-align: center; cursor: pointer;}.stagecontrol ul li:hover{ color: blue;}.pagecontrol{ position: fixed; left: 200px;}.pagecontrol ul li{ float: left; width: 50px; height: 25px; line-height: 25px; text-align: center; cursor: pointer;}.pagecontrol ul li:hover{ color: blue;}
javascript
/* * windowscroll 0.1 * window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面 * 兼容ie,ff,chrome等常见浏览器 * 借鉴搜狗4.2版http://ie.sogou.com/features4.2.html */ ;(function($,window,document,undefined){ //定义构造函数 var windowobj=function(ele,opt){ this.$element=ele; //最外层对象 this.defaults={ 'choose' : 0,//默认为上下 'verticalspeed' : 1, 'horizontalspeed' : 1, 'objcontrolul': null }, this.options=$.extend({},this.defaults,opt ); //阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数 this.stopdefaultandbubble=function(e){ e=e||window.event; if (e.preventdefault) { e.preventdefault(); } e.returnvalue=false; if (e.stoppropagation) { e.stoppropagation(); } e.cancelbubble=true; } this.setsize=function(ele){ $(ele).css({ 'width':$(window).outerwidth()+'px' }); //自动判断元素是否存在，对undefined赋css属性无意义 $(ele).children('.stage').css({ 'width':$(window).outerwidth()+'px', 'height':$(window).outerheight()+'px' }); $(ele).children('.page').css({ 'width':$(window).outerwidth()+'px', 'height':$(window).outerheight()+'px' }); } } //给构造函数添加方法 windowobj.prototype={ //上下滚动的方法 verticalmove:function(){ var obj=this.$element; //最外层对象 var speed=this.options.verticalspeed; var objcontrol=this.options.objcontrolul;//控制按钮 var windowheight=$(window).height(); var list=$(obj).children('.stage'); var listmax=$(list).length; var is_chrome=navigator.useragent.tolowercase().indexof('chrome')>-1; if(is_chrome){ //判断webkit内核，供scrolltop兼容性使用 windowobject='body'; }else{ //支持ie和ff windowobject='html'; } var stop=0; //均设置为windows大小 this.setsize(obj); //得到当前的垂直位置 var stageindex; function getindex(){ stageindex=math.round($(window).scrolltop()/windowheight); } //绑定键盘上下按键事件 $(document).keydown(function(event) { /* 绑定keycode38，即向上按钮 */ if (event.keycode==38) { getindex(); settimeout(function(){ scrollstage(windowobject,stageindex,1); //stageindex为当前页码 },100); }else if (event.keycode==40) {//绑定40，即向下按钮 getindex(); settimeout(function(){ scrollstage(windowobject,stageindex,-1); //stageindex为当前页码 },100); } }); //绑定滑轮功能的函数 function handle(delta){ getindex(); if (delta target) { //内容下移，窗口上移,上方出现弹痕 direction=-1; $(windowobject).animate({ scrolltop: target +px },1000*speed,function(){ crash_bottom(1,target,20,150); //调用撞击函数,先撞顶部,target变成当前页面了 }); }else if($(window).scrolltop() == windowheight*sindex){ //当前页面时 direction=0; crash_bottom(1, target ,20,150); //模拟撞底部 }else{ direction=1; $(windowobject).animate({ scrolltop: target +px },1000*speed,function(){ crash(1,target,20,150); //调用撞击函数,先撞底部 }); } }else{//响应鼠标滚轮和键盘上下，sindex为当前页面 if(direction==1){ if(sindex==0){ crash(1,target,20,150); }else{ //往上翻 sindex-=1; $(windowobject).animate({ scrolltop:windowheight*sindex+px },1000*speed,function(){ crash_bottom(1,windowheight*sindex,20,150); //调用撞击函数,往下翻内容往上，先撞顶部 } ); } }else{ if(sindex==listmax){ crash_bottom(1,target,20,150); }else{ //往下翻 sindex+=1; $(windowobject).animate({ scrolltop:windowheight*sindex+px },1000*speed,function(){ crash(1,windowheight*sindex,20,150); //调用撞击函数,往上翻内容往下，先撞底部 }); } } } } } //撞击函数 function crash_bottom(direction,termin,distant,time){ if (!stop) { var scrolltop=$(window).scrolltop(); if (direction==1) { direction=0; $(windowobject).animate({scrolltop:+=+distant+px},time,function(){ crash_bottom(direction,termin,distant*0.6,time); if (distant150) { stop=1;//停止碰撞 $(windowobject).animate({scrolltop:termin+px},time,function(){ stop=0; }); } }); }else if (direction==0) { direction=1; $(windowobject).animate({scrolltop:termin+px},time,function(){ crash_bottom(direction,termin,distant*0.6,time); if (distant150) { stop=1;//停止碰撞 $(windowobject).animate({scrolltop:termin+px},time,function(){ stop=0; }); } }); } } } function crash(direction,termin,distant,time){ if (!stop) { var scrolltop=$(window).scrolltop(); if (direction==1) { direction=0; $(windowobject).animate({scrolltop:-=+distant+px},time,function(){ crash(direction,termin,distant*0.6,time); if (distant150) { stop=1;//停止碰撞 $(windowobject).animate({scrolltop:termin+px},time,function(){ stop=0; }); } }); }else if (direction==0) { direction=1; $(windowobject).animate({scrolltop:termin+px},time,function(){ crash(direction,termin,distant*0.6,time); if (distant150) { stop=1;//停止碰撞 $(windowobject).animate({scrolltop:termin+px},time,function(){ stop=0; }); } }); } } } }, //左右滚动的方法 horizontalmove:function(){ var obj=this.$element; //最外层对象 var speed=this.options.horizontalspeed; var objcontrol=this.options.objcontrolul;//控制按钮 var windowwidth=$(window).width(); var list=$(obj).children('.page'); var listmax=$(list).length; var is_chrome=navigator.useragent.tolowercase().indexof('chrome')>-1; if(is_chrome){ //判断webkit内核，供scrolltop兼容性使用 windowobject='body'; }else{ //支持ie和ff windowobject='html'; } var stop=0; //均设置为windows大小 this.setsize(obj); $(obj).css({'width':windowwidth*listmax+'px'}); var pageindex; //当前页面页码(负数) function getpageindex(){ pageindex=math.round(parseint($(obj).css(margin-left)) / windowwidth); } //绑定键盘左右按键事件 $(document).keydown(function(event){ //判断event.keycode为39（即向右按钮） if (event.keycode==39) { getpageindex(); scrollpage($(obj),pageindex,-1); } //判断event.keycode为37（即向左按钮 else if (event.keycode==37) { getpageindex(); scrollpage($(obj),pageindex,1); } }); //如果有ul li控制按钮 if (objcontrol!=null) { $(objcontrol).delegate('li', 'click', function() { pageindex=$(this).index(); settimeout(function(){ scrollpage(obj,pageindex,0); },100); }); } function scrollpage(obje,pindex,dir){ var windowobject=obje; var direction=0||dir; var pageindex=pindex; var dist=math.round(parseint($(obj).css(margin-left))); //当前页距离左边的margin(负值) var aim=pageindex*windowwidth*(-1); if (!$(windowobject).is(:animated)) { if(!direction){ //响应nav if (dist != aim) { //此时pageindex为yearid.非负值 $(windowobject).animate({margin-left: aim + px}, 1000*speed); }else{ direction=0; $(windowobject).animate({margin-left:+=+50px},500).animate({margin-left:-=+100px},500).animate({margin-left:+=+50px},500); } }else{ //响应键盘左右键 if(direction==1){ //pageindex为负值 if(pageindex==0){ $(windowobject).animate({margin-left:+=+50px},500).animate({margin-left:-=+100px},500).animate({margin-left:+=+50px},500); }else{ pageindex+=1; //显示左边内容，左键 $(windowobject).animate({margin-left:+= + windowwidth + px}, 1000*speed); } }else{ if(pageindex== ((-1)*(listmax-1))){ $(windowobject).animate({margin-left:-=+50px},500).animate({margin-left:+=+100px},500).animate({margin-left:-=+50px},500); }else{ pageindex-=1; $(windowobject).animate({margin-left:-= + windowwidth + px}, 1000*speed); } } } } } } } //在插件中使用windowobj对象的方法，0为vertical，1为horizontal $.fn.windowscroll=function(options){ //创建实体 var windowobj=new windowobj(this,options); //根据选择调用方法 if (windowobj.options.choose==0) { return windowobj.verticalmove(); }else if(windowobj.options.choose==1){ return windowobj.horizontalmove(); }else{//2之后的留扩展吧 //add some functions } } })(jquery,window,document);
详细的代码下载见https://github.com/codetker/mywindowscroll
以上所述就是本文的全部内容了，希望大家能够喜欢。