学习--jquery 自定义插件 页面按照模块 垂直滚动

(function ($) {

    /**
     * 编写鼠标滚动事件
     */
    function scroll_scroll(event) {
        event = event || window.event;
        // 浏览器兼容（是否是IE ）
        if ($.browser.msie) {
            // IE 7 || IE 8
            if (($.browser.version == 7.0) || ($.browser.version == 8.0)) {
                // 取消事件的默认动作 这个很重要
                event.returnValue = false;
            } else if ($.browser.version == 9.0) {
                // IE 9
                // 取消事件的默认动作 这个很重要
                event.preventDefault();
            }
        } else {
            // 兼容 Opera/Chrome/Safari/Firefox
            // 取消事件的默认动作 这个很重要
            event.preventDefault();
        }

        // 判断当前动画是否结束
        if (!$.fn.my_scroll.defaults.isScrolling) {
            var modelIndex = $.fn.my_scroll.defaults.modelIndex;
            // 兼容 IE/Opera/Chrome/Safari
            if (event.wheelDelta) {
                switch (event.wheelDelta) {
                    case 120:
                        scroll_scrolling(scroll_up(modelIndex));
                        break;
                    case -120:
                        scroll_scrolling(scroll_down(modelIndex));
                        break;
                    default:
                        break;
                }
            } else if (event.detail) {
                // 兼容 firefox
                switch (event.detail) {
                    case -3:
                        scroll_scrolling(scroll_up(modelIndex));
                        break;
                    case 3:
                        scroll_scrolling(scroll_down(modelIndex));
                        break;
                    default:
                        break;
                }
            }
        }
    }

    /**
     * 向上滚动 计算index位置
     * @param modelIndex
     */
    function scroll_up(modelIndex) {
        if (modelIndex <= 0) {
            modelIndex = 0;
        } else {
            modelIndex--;
        }
        return modelIndex;
    }

    /**
     * 向下滚动 计算index位置
     * @param modelIndex
     */
    function scroll_down(modelIndex) {
        var modelLength = $.fn.my_scroll.defaults.obj.length - 1;
        if (modelIndex >= modelLength) {
            modelIndex = modelLength;
        } else {
            modelIndex++;
        }
        return modelIndex;
    }

    /**
     * 滚动到指定的模板位置
     * @param modelIndex
     */
    function scroll_scrolling(modelIndex) {
        // 标识动画开始
        $.fn.my_scroll.defaults.isScrolling = true;
        // 取得所有模块对象
        var poistionArry = $.fn.my_scroll.defaults.obj;
        // 当前模块对象的 位置
        var num = $(poistionArry[modelIndex]).offset().top;
        $('html, body').stop().animate({'scrollTop': num - 90}, $.fn.my_scroll.defaults.scrollSpeed, function () {
            // 标识动画结束
            $.fn.my_scroll.defaults.isScrolling = false;
            // 动画结束后重置当前index位置
            $.fn.my_scroll.defaults.modelIndex = modelIndex;
        });
        /**
         * 导航条动画效果
         * @param modelIndex
         */
        navigate_animate(modelIndex);
    }

    /**
     * 导航条 div 标签
     * @param modelIndex
     */
    function navigate_div() {
        var div = $('<div class="clx-swim-nav"></div>');
        return div;
    }

    /**
     * 导航条 ul 标签
     * @param modelIndex
     */
    function navigate_ul() {
        var ul = $('<ul></ul>');
        return ul;
    }

    /**
     * 导航条 li 标签
     * @param modelIndex
     */
    function navigate_li(text) {
        var li = $('<li></li>');
        var li_b = $('<b></b>');
        var li_a = $('<a href="javascript:;"></a>');
        li_b.appendTo(li);
        li_a.appendTo(li);
        li_b.html(text);
        return li;
    }

    /**
     * 导航条动画效果
     * @param modelIndex
     */
    function navigate_animate(modelIndex) {
        // 当前 li标签
        var curren_li = $.fn.my_scroll.defaults.navigate[modelIndex];
        // 将 li 标签转为 jquery 对象
        var li = $(curren_li);
        li.stop().animate({width: '19px'}, $.fn.my_scroll.defaults.scrollSpeed).css({background: '#56b39d'})
            .siblings().animate({width: '10px'}, $.fn.my_scroll.defaults.scrollSpeed).css({background: '#A5A5A5'});
    }

    $.fn.my_scroll = {
        /**
         * @param obj 一组模板
         */
        scroll: function (obj, options) {
            $.fn.my_scroll.defaults.obj = obj;
            $.extend($.fn.my_scroll.defaults, options);
            /**
             * 注册鼠标滚轮事件 兼容Firefox
             */
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scroll_scroll, false);
            }
            // 注册鼠标滚轮事件 兼容 IE/Opera/Chrome/Safari
            window.document.onmousewheel = scroll_scroll;
        },
        /**
         * 创建右侧导航, 将导航加入到 $.fn.my_scroll 中
         * @param obj 一组模块对象
         */
        rightNavigate: function () {
            var div = navigate_div().appendTo('body');
            var ul = navigate_ul().appendTo(div);
            // 根据模块数量 动态创建相匹配的导航
            $.each($.fn.my_scroll.defaults.obj, function (k, v) {
                var li = navigate_li($(v).attr('modelName')).appendTo(ul);
                li.click(function () {
                    // 页面滚动效果
                    scroll_scrolling($(this).index());
                });
            });
            // 取得导航条中的li标签
            $.fn.my_scroll.defaults.navigate = $('body > div.clx-swim-nav > ul > li');
            // 导航条默认第一个被选中
            navigate_animate($.fn.my_scroll.defaults.modelIndex);
        }
    };
    $.fn.my_scroll.defaults = {
        obj: {}, // 模块对象
        navigate: {}, // 导航对象
        modelIndex: 0, // 模板元素第几组
        isScrolling: false, // 开关 (当前动画是否结束)
        scrollSpeed: 1000
    };

})(jQuery);