jQuery插件开发之windowScroll

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

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

　　欢迎fork项目:https://github.com/codetker/myWindowScroll, 实现的效果见http://www.梦萦无双.xyz/myWindowScroll/demo/Default.html, 应用见http://wechat.wutnews.net/Web/PhotoWall/(尚在改善中)。

插件效果：

   实现window的上下滚动，默认绑定键盘上下按钮和鼠标滑轮
   实现window的左右滚动，默认绑定键盘左右按钮
   可附加ul li协助控制滚动
   可修改后附加缓动函数，实现多种效果，详情见缓动函数表 http://easings.net/zh-cn#easeInOutQuad

html 结构(ZenCoding形式)

  -div.divClass
      -div.toLeftOrTop
      -div.toRightOrBottom
      -div.stageClass*n

    -ul.controlUl
      -li.liClass*n

其中div.toLeftOrTop,div.toRightOrBottom,ul.controlUl可选

调用方法(详情见demo)(按需设置参数)

A.vertical

    $(".divClass").windowScroll({
        'choose': 0,             //垂直滚动，默认
        'verticalSpeed': 1,      //控制垂直滚动速度
        'objControlUl': 'ul.controlUl', //控制垂直滚动按钮，默认为null
        'list': '.stageClass',          //垂直滚动的对象
        'crash': true,                  //撞击底部特效
        'toTop': '.toLeftOrTop',        //向上按钮，默认为null
        'toBottom': 'toRightOrBottom',  //向下按钮，默认为null
        'liHover': 'stageSelect'        //设置当前stage的类名
    });

B.horizontal

    $(".divClass").windowScroll({
        'choose': 1,               //水平滚动
        'horizontalSpeed': 1,      //控制水平滚动速度
        'objControlUl': 'ul.controlUl', //控制水平滚动按钮，默认为null
        'list': '.stageClass',          //水平滚动的对象
        'crash': true,                  //撞击左右特效
        'toTop': '.toLeftOrTop',        //向左按钮，默认为null
        'toBottom': 'toRightOrBottom',  //向右按钮，默认为null
        'liHover': 'stageSelect'        //设置当前page的类名
    });

运行demo
最简单的方法为改Default.html中jquery对应script元素的src为本地的jquery(离线)或CDN中的jquery(在线),然后双击Default.html即可
或者配置myBoxScroll.jquery.json or package.json

PS:代码之间耦合过强，可重复利用的很多，准备参考学长的建议按模块写个人函数库，通过模块加载注入需要使用的工具函数

Demo代码如下:

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="../src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../dest/jquery.codetker.windowScroll.min.js"></script>
</head>

<body scroll="no">
    <div class="wrap" style="dispaly:block;">
        <div class="stageControl">
            <ul>
                <li class="stageSelect">stage1</li>
                <li>stage2</li>
                <li>stage3</li>
                <li>stage4</li>
                <li>stage5</li>
            </ul>
        </div>
        <div class="toTop">Top</div>
        <div class="toBottom">Bottom</div>
        <div class="stage stage1">
            <div class="pageControl">
                <ul>
                    <li class="pageSelect">page1</li>
                    <li>page2</li>
                    <li>page3</li>
                </ul>
            </div>
            <div class="toLeft">Left</div>
            <div class="toRight">Right</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': 1, 
            'objControlUl': '.wrap .stageControl',
            'list': '.wrap .stage',
            'crash': true,
            'toTop': '.toTop',
            'toBottom': '.toBottom',
            'liHover': 'stageSelect'
        });
        $(".stage1").windowScroll({
            'choose': 1,
            'horizontalSpeed': 1, 
            'objControlUl': '.stage1 .pageControl',
            'list': '.stage1 .page',
            'crash': true,
            'toLeft': '.toLeft',
            'toRight': '.toRight',
            'liHover': 'pageSelect'
        });
    });
</script>
</body>
</html>

View Code HTML