码迷，mamicode.com
首页 > Windows程序 > 详细

jQuery插件开发之windowScroll

时间：2015-07-13 22:09:50      阅读：204      评论：0      收藏：0      [点我收藏+]

标签：

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

      参考于搜狗浏览器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,实现的效果见http://wechat.wutnews.net/Web/PhotoWall/(尚在改善中)。

jQuery插件开发之windowScroll

标签：

原文地址：http://www.cnblogs.com/codetker/p/4643815.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！