全屏切換效果

AZmake 發布于2019-08-20 16:07 / 1595人閱讀

摘要：使背景圖始終位于屏幕中心插件的開發方式類級別組件開發即給命名空間添加新的全局函數，也稱靜態方法例如對象級別組件開發即掛在原型下的方法，這樣通過選擇器獲取的對象實例也能共享該方法，也稱動態方法這里例如等需要創建實例來調用頁面切換

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

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

jquery插件的開發方式

類級別組件開發

即給jquery命名空間添加新的全局函數，也稱靜態方法

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

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

對象級別組件開發

即掛在jQuery原型下的方法，這樣通過選擇器獲取的jquery對象實例也能共享該方法，也稱動態方法

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

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

例如: addClass() 、 attr() 等,需要創建實例來調用




    
    頁面切換
    


    
        
            
                
                    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";

    /*說明:獲取瀏覽器前綴*/
    /*實現：判斷某個元素的css樣式中是否存在transition屬性*/
    /*參數：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 = {
            /*說明：初始化插件*/
            /*實現：初始化dom結構，布局，分頁及綁定事件*/
            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();
            },
            /*說明：獲取滑動頁面數量*/
            pagesCount : function(){
                return this.section.length;
            },
            /*說明：獲取滑動的寬度（橫屏滑動）或高度（豎屏滑動）*/
            switchLength : function(){
                return this.direction == 1 ? this.element.height() : this.element.width();
            },
            /*說明：向前滑動即上一頁*/
            prve : function(){
                var me = this;
                if(me.index > 0){
                    me.index --;
                }else if(me.settings.loop){
                    me.index = me.pagesCount - 1;
                }
                me._scrollPage();
            },
            /*說明：向后滑動即下一頁*/
            next : function(){
                var me = this;
                if(me.index < me.pagesCount){
                    me.index ++;
                }else if(me.settings.loop){
                    me.index = 0;
                }
                me._scrollPage();
            },
            /*說明：主要針對橫屏情況進行頁面布局*/
            _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);
                }
            },
            /*說明：主要針對橫屏情況進行頁面布局*/
            _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;
                /*綁定鼠標滾輪事件*/
                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();
                        }
                    });
                }

                /*綁定窗口改變事件*/
                /*為了不頻繁調用resize的回調方法，做了延遲*/
                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動畫的瀏覽器，綁定transitionend事件(即在動畫結束后調用起回調函數)*/
                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();
                        }
                    })
                }
            },
            /*滑動動畫*/
            _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",        //動畫效果
        duration : 500,        //動畫執行時間
        loop : false,        //是否循環切換
        pagination : true,        //是否進行分頁
        keyboard : true,        //是否觸發鍵盤事件
        direction : "vertical",        //滑動方向vertical,horizontal
        callback : ""        //回調函數
    };

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

參考:

云服務器 GPU云服務器半屏全屏切換切換效果圖片切換效果 tab切換效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82732.html

提升Android手機主要視頻應用全屏播放的觀看體驗

摘要：為了給用戶帶來多媒體方面的體驗福利，一刻也不能停，現在要提升主要視頻應用全屏播放的觀看體驗。為了給用戶帶來多媒體方面的體驗福利，一刻也不能停，現在要提升主要視頻應用全屏播放的觀看體驗。提升主要視頻應用全屏播放的觀看體驗老板撂下一句話后拂袖而去，剩下的自己體會。經過人工智能的大腦快速處理，提取了幾個比較關鍵的技術點。 1.視頻應用，如何判斷到視頻應用在工作？ 2.全屏播放，如何判斷視...

raise_yang 2019-06-21 16:18 評論0 收藏0
在全屏滾動頁面下實現鼠標滾輪的子級交互

摘要：由此，我們可以完全屏蔽的默認滾動觸發，改用方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時秒設置的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現了目的。需求分析剛進公司產品提出一個需求：在全屏頁面中滾動鼠標滾輪更新文本，回滾再恢復原文本，同時不影響全屏頁面的正常切換：初始狀態 showImg(https://segmentfault.com/img/b...

godiscoder 2019-08-19 17:18 評論0 收藏0
H5打造屬于自己的視頻播放器（JS篇2）

摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經實現。回顧算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播...

sPeng 2019-08-21 14:17 評論0 收藏0

發表評論

登陸后可評論

0條評論

AZmake

男|高級講師

我要關注我要私信

TA的文章

Spark綜合學習筆記（三）搜狗搜索日志分析

閱讀 3267·2021-11-18 10:02
為什么這么多應屆生要進入互聯網行業？

閱讀 3443·2021-10-11 10:58
長知識了！這8個很少用但卻很實用的 Python 庫真棒！

閱讀 3376·2021-09-24 09:47
云主機怎么登陸-怎么登錄云主機？

閱讀 1120·2021-09-22 15:21
寶塔面板建站網站未備案域名無法打開網頁怎么解決?

閱讀 3915·2021-09-10 11:10
??擼完這個springboot項目，我對boot輕車熟路！【源碼+視頻都開源】【強烈建議收藏】??

閱讀 3277·2021-09-03 10:28
初探keyframes-animation

閱讀 1749·2019-08-30 15:45
div垂直居中知幾種？

閱讀 2137·2019-08-30 14:22

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

全屏切換效果

switchPage

Example

Example

THE END

相關文章

提升Android手機主要視頻應用全屏播放的觀看體驗

在全屏滾動頁面下實現鼠標滾輪的子級交互

H5打造屬于自己的視頻播放器（JS篇2）

發表評論

0條評論

AZmake

男|高級講師

TA的文章

Spark綜合學習筆記（三）搜狗搜索日志分析

為什么這么多應屆生要進入互聯網行業？

長知識了！這8個很少用但卻很實用的 Python 庫真棒！

云主機怎么登陸-怎么登錄云主機？

寶塔面板建站網站未備案域名無法打開網頁怎么解決?

??擼完這個springboot項目，我對boot輕車熟路！【源碼+視頻都開源】【強烈建議收藏】??

初探keyframes-animation

div垂直居中知幾種？

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

全屏切換效果

switchPage

Example

Example

THE END

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！