学习--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);