jQuery插件windowScroll实现单屏滚动特效

回首望，曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展，人也不得不向前走。

参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，还有很多可以拓展的空间。希望大家能多提意见与建议。

HTML

window对象滚动<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>

CSS

.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

//阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数
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{
     //<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>IE和FF
     windowobject='html';
   }
   var stop=0;

   //均设置为windows大小
   this.setSize(obj);

   //得到当前的垂直位置
   var stageIndex;
   function getIndex(){
     stageIndex=Math.round($(window).scrollTop()/windowHeight);
   } 

   //绑定<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>上下按键事件
   $(document).keydown(function(event) {
     /* 绑定keycode38，即向上按钮 */
     if (event.keyCode==38) {
       getIndex();
      setTimeout(function(){
        scrollStage(windowobject,stageIndex,1); //stageIndex为当前<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
      },100);
     }else if (event.keyCode==40) {//绑定40，即向下按钮
       getIndex();
      setTimeout(function(){
        scrollStage(windowobject,-1); //stageIndex为当前<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
      },100);
     }
   });

   //绑定滑轮<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
   function handle(delta){
     getIndex();
    if (delta<0) {
      setTimeout(function(){
        scrollStage(windowobject,100);
    }else{
      setTimeout(function(){
        scrollStage(windowobject,100);
    }

   }

   //判断滑轮，解决兼容性
   function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
      delta = event.wheelDelta; 
      if (window.opera) delta = -delta;
    } else if (event.detail) {
      delta = -event.detail;
    }
    if (delta)
      handle(delta); //调用执行函数
  }

   //注册事件
   if (window.addEventListener) {
     window.addEventListener('DOMMouseScroll',wheel,false);
   }
   window.onmousewheel = document.onmousewheel = wheel;

   //绑定鼠标滚轮事件
   $(document).bind('mousedown',function(event) {
     if (e.which==2) {//which=2代表鼠标滚轮,即为中键
       this.stopDefaultAndBubble(e);
       //bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效
       setTimeout(function(){
         this.stopDefaultAndBubble(e);
       },10);
     }
   });

   //如果有ul li控制按钮
   if (objControl!=null) {
     $(objControl).delegate('li','click',function() {
       stageIndex=$(this).index();
       setTimeout(function(){
         scrollStage(windowobject,0);
       },100);
     });
   }

   function scrollStage(obj,stIndex,dir){//如果用scrollStage=function来指定的话没有声明提前，然后就会找不到这个函数了
     //obj为操作滚动的对象
    //stIndex为点击调用时应该滚动到的页面页码，按键和滚轮调用时默认为1(传入0)
    //dir传入滚动时的方向，0代表不滚动，1代表向上，-1代表向下
    var sIndex=stIndex;//!(dir)则stageIndex为要到的页码，否则为当前页码
    var windowobject=obj;
    var direction=0||dir; //接收参数封装,没有传入时暂时认为为0
    var target=windowHeight*sIndex; //目标页面距离文档顶部距离

    if ( !$(windowobject).is(':animated') ) {//当没有在滚动时
      if(!direction){ ////响应guider,此时stageIndex为目标页面页码
        if ($(window).scrollTop() > target) { //<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>下移，窗口上移,上方出现弹痕
          direction=-1;
          $(windowobject).animate({
            "scrollTop": target +"px"
          },1000*speed,function(){
            crash_bottom(1,target,20,150); //<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>撞击<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>,先撞顶部,target变成<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>了
          });
        }else if($(window).scrollTop() == windowHeight*sIndex){ //<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>时
          direction=0;
          crash_bottom(1,150); //模拟撞<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>
        }else{
          direction=1;
          $(windowobject).animate({
            "scrollTop": target +"px"
          },function(){
            crash(1,先撞<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>

          });
        }
      }else{//响应鼠标滚轮和<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>上下，sindex为<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>
        if(direction==1){
          if(sIndex==0){
            crash(1,150);
          }else{ //往上翻
            sIndex-=1;
            $(windowobject).animate({
              "scrollTop":windowHeight*sIndex+"px"
              },function(){
                crash_bottom(1,windowHeight*sIndex,往下翻<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>往上，先撞顶部
              }
            );
          }
        }else{
          if(sIndex==listMax){
            crash_bottom(1,150);
          }else{ //往下翻
            sIndex+=1;
            $(windowobject).animate({
              "scrollTop":windowHeight*sIndex+"px"
            },function(){
              crash(1,往上翻<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>往下，先撞<a href="https://www.jb51.cc/tag/dibu/" target="_blank" class="keywords">底部</a>
            });

          }
        }
      }
    }
   }

  //撞击<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
  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,distant*0.6,time);
          if (distant<=15||time>150) {
            stop=1;//停止碰撞

            $(windowobject).animate({"scrollTop":termin+"px"},function(){
              stop=0;
            });
          }
        });
      }else if (direction==0) {
        direction=1;
        $(windowobject).animate({"scrollTop":termin+"px"},function(){
              stop=0;
            });
          }
        });
      }
    }
  }
  function crash(direction,time){
    if (!stop) {
      var scrollTop=$(window).scrollTop();
      if (direction==1) {
        direction=0;
        $(windowobject).animate({"scrollTop":"-="+distant+"px"},function(){
          crash(direction,function(){
              stop=0;
            });
          }
        });
      }
    }
  }

 },//左右滚动的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
 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{
     //<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>IE和FF
     windowobject='html';
   }
   var stop=0;

   //均设置为windows大小
   this.setSize(obj);
   $(obj).css({'width':windowWidth*listMax+'px'});

   var pageIndex; //<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a><a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>(负数)
  function getPageIndex(){
    pageIndex=Math.round(parseInt($(obj).css("margin-left")) / windowWidth);
  }

  //绑定<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>左右按键事件
  $(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),1);
    }
  });

  //如果有ul li控制按钮
   if (objControl!=null) {
     $(objControl).delegate('li',function() {
       pageIndex=$(this).index();
       setTimeout(function(){
         scrollPage(obj,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{ //响应<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a><a href="https://www.jb51.cc/tag/zuoyoujian/" target="_blank" class="keywords">左右键</a>
        if(direction==1){ //pageIndex为负值
          if(pageIndex==0){
            $(windowobject).animate({"margin-left":"+="+"50px"},500);  
          }else{
            pageIndex+=1; //<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>左边<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，左键
            $(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,document);

详细的代码下载见

以上所述就是本文的全部内容了，希望大家能够喜欢。

原文链接：https://www.f2er.com/jquery/53419.html

jQuery插件windowScroll实现单屏滚动特效

猜你在找的jQuery相关文章