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


Posted in Javascript onJuly 14, 2015

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

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

      代码如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>window对象滚动插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.windowScroll.js"></script>
</head>

<body scroll="no">
  <div class="wrap" style="dispaly:block;">
    <div class="stageControl">
      <ul>
        <li>stage1</li>
        <li>stage2</li>
        <li>stage3</li>
        <li>stage4</li>
        <li>stage5</li>
      </ul>
    </div>
    <div class="stage stage1">
      <div class="pageControl">
        <ul>
          <li>page1</li>
          <li>page2</li>
          <li>page3</li>
        </ul>
      </div>
      <div class="page page1"></div>
      <div class="page page2"></div>
      <div class="page page3"></div>  
    </div>
    <div class="stage stage2"></div>
    <div class="stage stage3"></div>
    <div class="stage stage4"></div>
    <div class="stage stage5"></div>
  </div>
<script type="text/javascript">
  $(document).ready(function(){
    $(".wrap").windowScroll({
      'choose' : 0,
      'verticalSpeed' : 2, //控制垂直滚动速度
      'horizontalSpeed' : 1,
      'objControlUl': '.wrap .stageControl'
    });
    $(".stage1").windowScroll({
      'choose': 1,
      'verticalSpeed' : 1,
      'horizontalSpeed' : 1,//控制水平滚动速度
      'objControlUl': '.stage1 .pageControl'
    });
  });
</script>
</body>
</html>

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<0) {
          setTimeout(function(){
            scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
          },100);
        }else{
          setTimeout(function(){
            scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
          },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,stageIndex,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) { //内容下移,窗口上移,上方出现弹痕
              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 (distant<=15||time>150) {
                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 (distant<=15||time>150) {
                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 (distant<=15||time>150) {
                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 (distant<=15||time>150) {
                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

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
记一次vue跨域的解决
Oct 21 Javascript
微信小程序实现录音Record功能
May 09 Javascript
jQuery实现模拟marquee标签效果
Jul 14 #Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 #Javascript
jQuery自动添加表单项的方法
Jul 13 #Javascript
JavaScript去除数组里重复值的方法
Jul 13 #Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 #Javascript
jQuery检测返回值的数据类型
Jul 13 #Javascript
jQuery常用且重要方法汇总
Jul 13 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python 的topk算法实例
2020/04/02 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
地理教师岗位职责
2014/03/16 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL