摘要：使背景圖始終位于屏幕中心插件的開發(fā)方式類級(jí)別組件開發(fā)即給命名空間添加新的全局函數(shù)，也稱靜態(tài)方法例如對(duì)象級(jí)別組件開發(fā)即掛在原型下的方法，這樣通過選擇器獲取的對(duì)象實(shí)例也能共享該方法，也稱動(dòng)態(tài)方法這里例如等需要?jiǎng)?chuàng)建實(shí)例來調(diào)用頁面切換

使背景圖始終位于屏幕中心

    #section1,
    #section2,
    #section3,
    #section4{
        background-color: #000;
        background-size: cover;
        background-position: 50% 50%;
        text-align: center;
        color: white;
    }
    
    

jquery插件的開發(fā)方式

類級(jí)別組件開發(fā)

即給jquery命名空間添加新的全局函數(shù)，也稱靜態(tài)方法

jQuery.myPlugin = function () {
    //do something
}

例如 $.Ajax()、$.extend()

對(duì)象級(jí)別組件開發(fā)

即 掛在jQuery原型下的方法，這樣通過選擇器獲取的jquery對(duì)象實(shí)例也能共享該方法，也稱動(dòng)態(tài)方法

$.fn.myPlugin = function () {
    //do something
};

//這里$.fn === $.prototype

例如: addClass() 、 attr() 等,需要?jiǎng)?chuàng)建實(shí)例來調(diào)用

    
    
    


    

        

            

                

                    
switchPage
                    
Create Beautiful Fullscreen Scrolling Websites
                
            
            

                

                    
Example
                    
HTML markup example to define 4 sections
                    
                
            
            

                

                    
Example
                    
The plug-in configuration parameters
                    
                
            
            

                

                    
THE END
                    
Everything will be okay in the end. If it"s not okay, it"s not the end.
                
            
        
    
    
    
    

(function($){
    "use strict";

    /*說明:獲取瀏覽器前綴*/
    /*實(shí)現(xiàn)：判斷某個(gè)元素的css樣式中是否存在transition屬性*/
    /*參數(shù)：dom元素*/
    /*返回值：boolean，有則返回瀏覽器樣式前綴，否則返回false*/
    var _prefix = (function(temp){
        var aPrefix = ["webkit", "Moz", "o", "ms"],
            props = "";
        for(var i in aPrefix){
            props = aPrefix[i] + "Transition";
            if(temp.style[ props ] !== undefined){
                return "-"+aPrefix[i].toLowerCase()+"-";
            }
        }
        return false;
    })(document.createElement(PageSwitch));

    var PageSwitch = (function(){
        function PageSwitch(element, options){
            this.settings = $.extend(true, $.fn.PageSwitch.defaults, options||{});
            this.element = element;
            this.init();
        }

        PageSwitch.prototype = {
            /*說明：初始化插件*/
            /*實(shí)現(xiàn)：初始化dom結(jié)構(gòu)，布局，分頁及綁定事件*/
            init : function(){
                var me = this;
                me.selectors = me.settings.selectors;
                me.sections = me.element.find(me.selectors.sections);
                me.section = me.sections.find(me.selectors.section);

                me.direction = me.settings.direction == "vertical" ? true : false;
                me.pagesCount = me.pagesCount();
                me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;

                me.canscroll = true;

                if(!me.direction || me.index){
                    me._initLayout();
                }

                if(me.settings.pagination){
                    me._initPaging();
                }

                me._initEvent();
            },
            /*說明：獲取滑動(dòng)頁面數(shù)量*/
            pagesCount : function(){
                return this.section.length;
            },
            /*說明：獲取滑動(dòng)的寬度（橫屏滑動(dòng)）或高度（豎屏滑動(dòng)）*/
            switchLength : function(){
                return this.direction == 1 ? this.element.height() : this.element.width();
            },
            /*說明：向前滑動(dòng)即上一頁*/
            prve : function(){
                var me = this;
                if(me.index > 0){
                    me.index --;
                }else if(me.settings.loop){
                    me.index = me.pagesCount - 1;
                }
                me._scrollPage();
            },
            /*說明：向后滑動(dòng)即下一頁*/
            next : function(){
                var me = this;
                if(me.index < me.pagesCount){
                    me.index ++;
                }else if(me.settings.loop){
                    me.index = 0;
                }
                me._scrollPage();
            },
            /*說明：主要針對(duì)橫屏情況進(jìn)行頁面布局*/
            _initLayout : function(){
                var me = this;
                if(!me.direction){
                    var width = (me.pagesCount * 100) + "%",
                        cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
                    me.sections.width(width);
                    me.section.width(cellWidth).css("float", "left");
                }
                if(me.index){
                    me._scrollPage(true);
                }
            },
            /*說明：主要針對(duì)橫屏情況進(jìn)行頁面布局*/
            _initPaging : function(){
                var me = this,
                    pagesClass = me.selectors.page.substring(1);
                me.activeClass = me.selectors.active.substring(1);

                var pageHtml = "
";
                for(var i = 0 ; i < me.pagesCount; i++){
                    pageHtml += "
";
                }
                me.element.append(pageHtml);
                var pages = me.element.find(me.selectors.page);
                me.pageItem = pages.find("li");
                me.pageItem.eq(me.index).addClass(me.activeClass);

                if(me.direction){
                    pages.addClass("vertical");
                }else{
                    pages.addClass("horizontal");
                }
            },
            /*說明：初始化插件事件*/
            _initEvent : function(){
                var me = this;
                /*綁定鼠標(biāo)滾輪事件*/
                me.element.on("mousewheel DOMMouseScroll", function(e){
                    e.preventDefault();
                    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
                    if(me.canscroll){
                        if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){
                            me.prve();
                        }else if(delta < 0 && (me.index < (me.pagesCount-1) && !me.settings.loop || me.settings.loop)){
                            me.next();
                        }
                    }
                });

                /*綁定分頁click事件*/
                me.element.on("click", me.selectors.page + " li", function(){
                    me.index = $(this).index();
                    me._scrollPage();
                });

                if(me.settings.keyboard){
                    $(window).keydown(function(e){
                        var keyCode = e.keyCode;
                        if(keyCode == 37 || keyCode == 38){
                            me.prve();
                        }else if(keyCode == 39 || keyCode == 40){
                            me.next();
                        }
                    });
                }

                /*綁定窗口改變事件*/
                /*為了不頻繁調(diào)用resize的回調(diào)方法，做了延遲*/
                var resizeId;
                $(window).resize(function(){
                    clearTimeout(resizeId);
                    resizeId = setTimeout(function(){
                        var currentLength = me.switchLength();
                        var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
                        if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){
                            me.index ++;
                        }
                        if(me.index){
                            me._scrollPage();
                        }
                    },500);
                });

                /*支持CSS3動(dòng)畫的瀏覽器，綁定transitionend事件(即在動(dòng)畫結(jié)束后調(diào)用起回調(diào)函數(shù))*/
                if(_prefix){
                    me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
                        me.canscroll = true;
                        if(me.settings.callback && $.type(me.settings.callback) === "function"){
                            me.settings.callback();
                        }
                    })
                }
            },
            /*滑動(dòng)動(dòng)畫*/
            _scrollPage : function(init){
                var me = this;
                var dest = me.section.eq(me.index).position();
                if(!dest) return;

                me.canscroll = false;
                if(_prefix){
                    var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
                    me.sections.css(_prefix+"transition", "all " + me.settings.duration + "ms " + me.settings.easing);
                    me.sections.css(_prefix+"transform" , translate);
                }else{
                    var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};
                    me.sections.animate(animateCss, me.settings.duration, function(){
                        me.canscroll = true;
                        if(me.settings.callback){
                            me.settings.callback();
                        }
                    });
                }
                if(me.settings.pagination && !init){
                    me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
                }
            }
        };
        return PageSwitch;
    })();

    $.fn.PageSwitch = function(options){
        return this.each(function(){
            var me = $(this),
                instance = me.data("PageSwitch");

            if(!instance){
                me.data("PageSwitch", (instance = new PageSwitch(me, options)));
            }

            if($.type(options) === "string") return instance[options]();
        });
    };

    $.fn.PageSwitch.defaults = {
        selectors : {
            sections : ".sections",
            section : ".section",
            page : ".pages",
            active : ".active",
        },
        index : 0,        //頁面開始的索引
        easing : "ease",        //動(dòng)畫效果
        duration : 500,        //動(dòng)畫執(zhí)行時(shí)間
        loop : false,        //是否循環(huán)切換
        pagination : true,        //是否進(jìn)行分頁
        keyboard : true,        //是否觸發(fā)鍵盤事件
        direction : "vertical",        //滑動(dòng)方向vertical,horizontal
        callback : ""        //回調(diào)函數(shù)
    };

    $(function(){
        $("[data-PageSwitch]").PageSwitch();
    });
})(jQuery);

參考: